Урок 4
Выравнивание элементов
15 минВыравнивание — главная суперсила Flexbox. Разберём все возможные комбинации и техники.
Шпаргалка по выравниванию
Запомните простое правило:
justify-content— вдоль главной оси (по умолчанию горизонтально)align-items— вдоль поперечной оси (по умолчанию вертикально)
Магия margin: auto
В Flexbox margin: auto работает магически — поглощает всё свободное пространство:
Выравнивание с flex-direction: column
Когда меняем направление, оси меняются местами:
Выравнивание многострочного контента
При flex-wrap: wrap используйте align-content для выравнивания строк:
Практика: Карточка профиля
Соберём карточку с разными типами выравнивания:
Материалы по теме
- Глоссарий digital-терминов Глоссарий
- Статьи блога по разработке и SEO Блог
- Практические чеклисты по внедрению Чеклисты
- A/B тестирование: полное руководство Статья