Урок 08. Частые ошибки

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

⚡ Кратко

Сжатые иконки, неработающий truncate, w-full вместо flex-1, лишние обёртки и justify-between там, где нужен ms-auto.

Ошибка 1. Иконка сплющилась

Как ломается: круглый аватар превращается в овал, когда рядом длинный текст.

Без shrink-0 аватар сжимается и становится овалом при длинном тексте рядом

С shrink-0 аватар сохраняет форму при любом объёме текста рядом

<div class="space-y-3">
  <div class="flex max-w-xs items-center gap-3 rounded-lg border border-slate-200 p-3">
    <div class="size-10 rounded-full bg-rose-300"></div>
    <p class="text-sm text-slate-700">Без shrink-0 аватар сжимается и становится овалом при длинном тексте рядом</p>
  </div>
  <div class="flex max-w-xs items-center gap-3 rounded-lg border border-slate-200 p-3">
    <div class="size-10 shrink-0 rounded-full bg-emerald-300"></div>
    <p class="text-sm text-slate-700">С shrink-0 аватар сохраняет форму при любом объёме текста рядом</p>
  </div>
</div>

Ошибка 2. w-full внутри flex-строки

❌ Элемент выдавливает соседей

<div class="flex gap-2">
  <div class="w-full">Поле</div>
  <button>Кнопка</button>
</div>

✅ flex-1 делит оставшееся место

<div class="flex gap-2">
  <div class="flex-1">Поле</div>
  <button class="shrink-0">Кнопка</button>
</div>

Ошибка 3. justify-between с тремя элементами вместо ms-auto

Как ломается: при добавлении четвёртого элемента раскладка «разъезжается» непредсказуемо.

Как правильно: если нужно прижать один элемент к правому краю, используйте ms-auto у него. justify-between уместен ровно тогда, когда элементов два.

Ошибка 4. Обёртка ради обёртки

❌ Лишний div

<div class="flex">
  <div><span class="badge">Новый</span></div>
</div>

✅ Флекс-элементом может быть сам span

<div class="flex">
  <span class="badge">Новый</span>
</div>

Почему: flex-контейнер делает флекс-элементами всех прямых детей, включая строчные. Лишние обёртки только усложняют разметку.

Ошибка 5. items-center там, где нужен items-start

Когда в строке блок из двух-трёх строк текста и иконка, центрирование выглядит неряшливо: иконка «плавает» посередине абзаца. Для многострочного содержимого почти всегда нужен items-start.