📐 Flexbox
Map of Content для CSS Flexbox: одномерная раскладка, выравнивание, порядок элементов и практические паттерны.
📑 Оглавление
Зачем нужно
Flexbox решил проблему выравнивания и распределения пространства, с которой веб-разработчики боролись годами. Это основной инструмент для компонентной раскладки: навбары, карточки, формы, модальные окна -- всё это Flexbox. Без него невозможно писать современный CSS.
🗺 Путь обучения
🟢 Начинающий
Концепции
Свойства контейнера -- основы
Выравнивание -- основы
- justify-content -- выравнивание по главной оси
- align-items -- выравнивание по поперечной оси
- align-content -- многострочное выравнивание
🟡 Средний
Свойства элементов
- flex-grow -- расширение
- flex-shrink -- сжатие
- flex-basis -- базовый размер
- flex -- сокращённое свойство
- align-self -- индивидуальное выравнивание
- order -- порядок элементов
Sizing и пространство
- gap -- отступы между элементами
- Как Flexbox рассчитывает размеры
- min-width 0 и overflow в Flexbox
- Flex и auto margins
🔴 Продвинутый
Практические паттерны
- Flexbox -- навигационная панель
- Flexbox -- карточная раскладка
- Flexbox -- Holy Grail Layout
- Flexbox -- центрирование элементов
- Flexbox -- sticky footer
- Flexbox -- форма с инлайн-полями
Сравнение и комбинирование
- Flexbox vs Grid
- Flexbox внутри Grid
- Flexbox -- распространённые баги и фиксы
- Flexbox -- доступность и порядок
🔗 Связанные домены
| Домен | Связь |
|---|---|
| _MOC CSS | Родительский домен |
| _MOC Grid | Альтернативная система раскладки |
| _MOC HTML | Структура для раскладки |
| _MOC Рецепты | Готовые Flexbox-решения |
🧭 Навигация
| ⬆ Родительский MOC | _MOC CSS |
| ⬆ К главной | 🗺️ MOC |