Урок 08. display и Flexbox

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

⚡ Кратко

flex включает флекс-раскладку, flex-col разворачивает её по вертикали. Выравнивание вдоль главной оси — justify-*, поперёк — items-*, промежуток — gap-*. Растянуть элемент — flex-1, запретить сжатие — shrink-0.

О чём этот урок

Flexbox — рабочая лошадка интерфейса: шапки, панели инструментов, строки списка, кнопки с иконками. Все свойства вам знакомы из CSS, здесь мы учимся записывать их утилитами и разбираем неочевидные места: flex-1 против w-full, зачем нужен min-w-0, чем shrink-0 спасает иконки.

Структура урока

Теория

Оси, выравнивание, рост и сжатие элементов.

Справочник

Все классы flex одной таблицей.

Примеры

Шапка, строка списка, кнопка с иконкой, «липкий» футер.

Старый vs Новый

float и inline-block против flex.

Задания

Собрать панель и карточку профиля.

Решения

Готовые раскладки с разбором.

Ошибки

Сжатие иконок, отсутствие min-w-0, gap и margin вместе.

Домашнее задание

Шапка приложения.

Ресурсы

Документация по flex.

Практика

  • Соберите строку «логотип слева, кнопки справа».
  • Сделайте так, чтобы центральный блок занял всё свободное место.
  • Добейтесь, чтобы длинный текст обрезался, а иконка не сжималась.

Навигация