Flexbox CSS: основы и особенности применения

На одном сайте нашёл интересный материал по сеткам на flexbox и решил это законспектировать. Может кому то пригодится.

Начну с того что такое флексбокс — это модуль макета гибкого контейнера. Flexbox позволяет строить на html-странице модульную сетку. Модульная сетка — это способ компоновки элементов на веб-странице.

В основе технологии флексбокс лежит идея позиционирования элементов вдоль оси. По структуре конструкция flexbox состоит из гибкого контейнера — flex-контейнер и вложенных в него flex-элементов. Флекс-элементы выстраиваются вдоль оси. При этом пространство внутри флекс-контейнера распределяется в зависимости от специальных свойств.

Технология flexbox имеет ряд преимуществ в сравнении с более старыми подходами выстраивания сетки, такими как таблицы, флоаты (floats) с обтеканием и прочие костыли. Флексбокс круче хотя бы потому что это первая специализированная технология для управления потоком документа, а не костыльное решение, притянутое за уши из за отсутствия альтернатив.

Интересный нюанс по поводу оси. У флексбокс конструкции ДВЕ оси. Основная ось по умолчанию направлена слева на право, но это можно легко изменить. Дополнительная ось всегда перпендикулярна основной, т е пересекает её. Её направление полностью зависит от положения основной оси. По умолчанию, если основная ось расположена горизонтально, с лева на право, то дополнительная ось расположена вертикально и направлена сверху вниз.

Flexbox CSS: основы и особенности применения
Схема блока html-страницы на flexbox.

Свойства flexbox-конструкции

Flexbox CSS: основы и особенности применения

Юрий Ронин