Урок 08. Решения

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Разбор трёх заданий с живым результатом.

Решение задания 1

Документы

<div class="flex flex-wrap items-center gap-3 rounded-lg border border-slate-200 bg-white p-3">
  <h3 class="shrink-0 text-sm font-semibold text-slate-900">Документы</h3>
  <input class="min-w-40 flex-1 rounded-md border border-slate-300 px-3 py-1.5 text-sm placeholder:text-slate-400
                focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none"
         placeholder="Поиск по названию">
  <div class="flex shrink-0 gap-2">
    <button class="rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50">Фильтр</button>
    <button class="rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white hover:bg-slate-700">Загрузить</button>
  </div>
</div>

Почему так: flex-1 отдаёт полю поиска остаток ширины, min-w-40 не даёт ему схлопнуться, а flex-wrap переносит кнопки на новую строку на узком экране.

Решение задания 2

Синхронизация завершена

Все документы обновлены. Конфликтов не обнаружено, изменения применены ко всем устройствам команды.

<div class="flex w-90 items-start gap-3 rounded-lg border border-slate-200 bg-white p-3">
  <div class="size-8 shrink-0 rounded-full bg-sky-100"></div>
  <div class="min-w-0 flex-1">
    <p class="text-sm font-medium text-slate-900">Синхронизация завершена</p>
    <p class="line-clamp-2 text-xs text-slate-500">Все документы обновлены. Конфликтов не обнаружено, изменения применены ко всем устройствам команды.</p>
  </div>
  <button class="shrink-0 rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600" aria-label="Закрыть">✕</button>
</div>

Почему так: items-start прижимает иконку и крестик к верху, а не центрирует их относительно двух строк текста.

Решение задания 3

Базовый

Короткое описание.

Расширенный

Описание подлиннее: несколько строк текста, чтобы карточка выросла по высоте.

Корпоративный

Среднее описание в две строки.

<div class="grid gap-4 sm:grid-cols-3">
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-4">
    <h3 class="text-sm font-semibold text-slate-900">Базовый</h3>
    <p class="mt-1 text-sm text-slate-600">Короткое описание.</p>
    <button class="mt-auto pt-4"><span class="block rounded-md bg-slate-900 px-3 py-2 text-sm text-white">Выбрать</span></button>
  </div>
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-4">
    <h3 class="text-sm font-semibold text-slate-900">Расширенный</h3>
    <p class="mt-1 text-sm text-slate-600">Описание подлиннее: несколько строк текста, чтобы карточка выросла по высоте.</p>
    <button class="mt-auto pt-4"><span class="block rounded-md bg-slate-900 px-3 py-2 text-sm text-white">Выбрать</span></button>
  </div>
  <div class="flex flex-col rounded-xl border border-slate-200 bg-white p-4">
    <h3 class="text-sm font-semibold text-slate-900">Корпоративный</h3>
    <p class="mt-1 text-sm text-slate-600">Среднее описание в две строки.</p>
    <button class="mt-auto pt-4"><span class="block rounded-md bg-slate-900 px-3 py-2 text-sm text-white">Выбрать</span></button>
  </div>
</div>

Почему так: карточка — это flex flex-col, а mt-auto у кнопки «съедает» всё свободное место сверху и прижимает её к низу. Высоту карточек выравнивает grid-родитель.