В этой лекции будет рассмотрена технология flexbox, используемая для позиционироания элементов на странице.
Идея флексбоксов появилась ещё в 2009 году и по сей день этот стандарт развивается и прорабатывается. Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово гибкое, что и отражено в названии (flex — англ. гибко).
Чтобы получить краткую выжимку информации о технологии flexbox, можно посмотреть видео CSS Flexbox in 100 Seconds от Fireship.
Флекс — это не отдельное свойство, но целый модуль, включающий набор свойств. Некоторые из этих свойств добавляются к контейнеру (родительскому элементу, известному как «флекс-контейнер»), другие — к дочерним элементам (известным как «флекс-элементы»).
Контейнер:
Элементы:
«Обычный» макет основан на потоке из блочных и строчных элементов, а флекс-макет — на «флекс-потоке».
Элементы располагаются вдоль основной (главной) оси (main axis) (от main-start до main-end) или вдоль поперечной оси (от cross-start до cross-end).
Главная ось:
Поперечная ось:
