HTML\CSS → CSS Flexbox краткое руководство

Flexbox (“флексбокс”) — CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.

На текущий момент поддержка флексбокса в современных браузерах довольно хорошая, его смело можно использовать уже сейчас.

Свойство display: flex делает эелемент флекс-контейнером, прямые потомки (первого уровня вложенности) превращаются вофлекс-элементы.

Особенности flexbox:

• флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;
• на флекс-элементы не действует float, vertical-align
• ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно
• внешние отступы (margin) не схлопываются и не выпадают, значение auto центрирует элементы по вертикали и горизонтали, а также «ломает» механизмы выравнивания.

Свойство flex-direction “Главная ось”

Свойство flex-direction — задает направление главной осифлекс-контейнера. Принимает значения:
row — главная ось направлена слево направо (по умолчанию);
column — главная ось направлена сверху вниз;
row-reverse — главная ось направлена справа налево;
column-reverse — главная ось направлена снизу вверх;
Флекс-элементы всегда располагаются вдоль главной оси.

Существует также направление поперечной оси, вдоль этой оси рассчитывается высота элементов и вертикальные выравнивания. Поперечная ось всегда перпендикулярна главной оси. Если главная ось направлена горизонтально (rowили row-reverse), то поперечная ось — смотрит вниз; если главная ось направлена вертикально (column или column-reverse) — то поперечная ось смотрит направо. Поперечная ось никогда не смотрит вверх или влево. Свойства для поворота поперечной оси нет.

Свойство justify-content “Выравнивание по горизонтали”

Свойство justify-content — определяет выравнивание вдоль главной оси и при этом не меняет порядок элементов, как это происходит при изменении направления оси. Элементы просто прижимаются к началу, концу, средине или по ширине главной оси. Возможные значения:
flex-start — элементы располагаются в начале главной оси (по умолчанию);
flex-end — элементы располагаются в конце;
center — элементы располагаются по центру;
space-between — элементы выравниваются по ширине, расстояния между соседними элементами — динаковые, а от краевотступов нет;
space-around — элементы выравниваются по ширине, расстояния между соседними элементами — одинаковые, но между элементами и краями есть отступы (равные половине расстояния между соседними элементами).

Свойство align-items “Выравнивание по вертикали”

Свойство align-items — определяет выравнивания вдоль поперечной оси. Значения:
stretch — элементы растянутся на всю «высоту» контейнера (по умолчанию);
flex-start — элементы располагаются в начале поперечной оси;
flex-end — элементы располагаются в конце;
center — элементы выравниваются по центру;
baseline— элементы выравниваются по базовой линии(находятся на «одной строке»), эта воображаемая линия проходит по нижней части текста;

Флекс-элементы по умолчанию растягиваются на всю высоту контейнера. Если у элемента задана высота (height), то растягиваться он не будет.

Свойство align-self “Эгоистичное выравнивание”

Свойство align-self — позволяет задавать элементам разноепоперечное выравнивание и задается для конкретных элементов, а не всео контейнера. Значения:
stretch — элемент растягивается на всю «высоту» контейнера (по умолчанию);
flex-start — элемент располагается в начале поперечной оси;
flex-end — элемент располагаются в конце;
center — элемент выровнивается по центру;
baseline— элемент выравнивается по базовой линии, эта воображаемая линия проходит по нижней части текста;

Свойство flex-wrap “Перенос”

Свойство flex-wrap — управляет переносом элементов на новую строку. Значения:
nowrap — перенос элементов на новую строку запрещен (по умолчанию). Элементы будут сжаты до минимально возможной ширины (даже если задать ее явно), затем выйдут за пределы контейнера располагаясь в один ряд;
wrap — перенос разрешен;
wrap-reverse— перенос разрешен, но ряды будут располагатьсяв обратном порядке (относительно поперечной оси);

Свойство align-content “Распределение рядов”

Свойство align-content — управляет выравниванием рядоввдоль поперечной оси. Отличие от align-items в том, что свойствовлияет на ряды, а не на отдельные элементы. Значения:
stretch — ряды растягиваются по всей поперечной оси (по умолчанию);
flex-start — ряды располагаются в начале поперечной оси;
flex-end — ряды располагаются в конце поперечной оси;
center — ряды располагаются по центру поперечной оси;
space-between — ряды выравниваются по ширине, расстояния между соседними рядами — динаковые, а от краев отступов нет;
space-around — ряды выравниваются по ширине, расстояния между соседними рядами — одинаковые, но между рядами и краями есть отступы.

В чем разница между align-items vs align-content. Если в контейнере появляется несколько рядов элементов, вместо align-items начинает действовать свойство align-content. Если есть только 1 ряд элементов, то работает — align-items. Если есть несколько рядов, то работает — align-content. Выравнивание рядов, можно сказать, переопределяет выравнивание элементов.
Важный момент: при align-content: stretch отображение строк зависит от значения align-items. Если у align-items задано значение align-items: stretch — то элементы в строках растягиваются на всю высоту своей строки. В противном случае — элементы в строках ужимаются под свое содержимое и выравниваются в зависимости от значения align-items: *.

Свойство order “Порядковый номер”

Свойство order — позволяет менять порядок следования элементов в потоке, не меняя HTML-код. Значение: число (положительное или отрицательное). По умолчанию 0, сортировка производится по возрастанию.

Свойство flex-basis “Базовый размер”

Свойство flex-basis — задает базовый размер элемента,размер элемента вдоль главной оси. Это начальный илиисходный размер вдоль главной оси. Значение по умолчанию —auto.

Если главная ось направлена горизонтально, то главный размер — это ширина (width), а поперечный размер — это высота (height). Если главная ось направлена вертикально, то все наоборот.

Если flex-basis не задан или его значение равно auto, то базовый размер берется из width или height. Свойство flex-basis принимает те же значения, что и width и heigh, но является «сильнее» и переопределит либо ширину, либо высоту в зависимости от направления главной оси.

Базовый размер — это исходный размер флекс-элементов до применения flex-grow.

Свойство flex-grow “Коефициент растягивания”

Свойство flex-grow — задает коефициент растягивания (будет ли растягиваться элемент на свободное пространство), принимает неотрицательные числовые значения (по умолчанию —0). Значение flex-grow: 0 означает, что элемент не будет растягиватьcz на свободное место во флекс-контейнере. Значение flex-grow: > 0 (больше нуля), означает, что элементбудет растягиваться, «захватывая» оставшееся свободное место. Если сразу у нескольких флекс-элементов значение flex-grow больше нуля, то они будут делить свободное место между собой. Свободное место будет добавляться флекс-элементам пропорционально значениям. При этом важно не само значение коэффициента, а его соотношение с коэффициентами остальных элементов, например: 1 и 2 = 1:2, 30 и 40 = 3:4 и т.д.

Рассчитать flex-grow по формуле можно так:

1. СМ (Свободное место) = Ширина контейнера — Сумма базовых размеров элементов flex-basis
2. ДСМ (Доля свободного места) = СМ / Сумма flex-grow всех элементов
3. Итоговый размер = Базовый размер flex-basis + (ДСМ * flex-grow)

При flex-basis: 0 свободное место будет занимать всю ширину флекс-контейнера, и коэффициенты растягивания будут другими.

Использовать flex-basis: 0 и flex-grow для точного управления относительными размерами не стоит. Лучше использовать flex-basis: %.

На размер оставшегося свободного места влияет не только flex-basis, но и рамки, и отступы. Если flex-basis явно задано нулевое значение, то min-width на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.

Свойство flex-shrink “Коефициент сжатия”

Свойство flex-shrink — отвечает за сжатие флекс-элементов. Флекс-элементы стараются быть максимально «гибкими» и не выпадать из контейнера, поэтому у flex-shrink имеет значение по умолчанию 1. Свойство принимает неотрицательные числовые значения.

Если flex-shrink: > 0, то элемент будет уменьшаться, «впитывая» часть отрицательного пространства, если оно существует. Если flex-shrink: 0, то элемент уменьшаться не будет.

Свойство flex-shrink работает схожим образом со свойством flex-grow и задает пропорции, в которых флекс-элементы «впитывают» отрицательное пространство. Чем больше значение свойства у элемента, тем больше отрицательного пространства он «впитает» и тем сильнее сожмется. Доля отрицательного пространства, которую «впитает» элемент, зависит от соотношения коэффициента сжатия элемента с коэффициентами других элементов и соотношения базового размера элемента с базовыми размерами других элементов.

Рассчитать flex-shrink по формуле можно так:

1. ОП (Отрицательное пространство) = Ширина контейнера — Сумма базовых размеров элементов flex-basis
2. СПБР (Сумма произведений базовых размеров) = (Базовый размер1 * flex-shrink1) + (Базовый размер2 * flex-shrink2) + ... + (Базовый размерн * flex-shrinkn)
3. НКС (Нормированный коэффициент сжатия) = (Базовый размер * flex-shrink) / СПБР
4. Итоговый размер = Базовый размер — (НКС * ОП)

Элементы сжимаются в пределах своих базовых размеров, внутренние отступы и рамки не сжимаются. min-widthприменяется к элементам после этапа перераспределения свободного места или отрицательного пространства.

Свойство flex “Сокращенная запись”

Свойство flex— является сокращенной записью трех свойтвflex-grow flex-shrink flex-basis (коэффициенты растягивания — коэффициенты сжатия — базовый размер).

Пример значений свойства flex:

flex: initial;  -> flex: 0 1 auto;
flex: auto;     -> flex: 1 1 auto;
flex: none;     -> flex: 0 0 auto;
flex: 1 0 300px -> flex: 1 0 300px;
flex: 1 0;      -> flex: 1 0 0%;
flex: 1;        -> flex: 1 1 0%;

При flex-wrap: wrap свойство flex-shrink работает как обычно, но при нехватке места в строке флекс-элементы будут переноситься на новую строку. Для элемента, базовый размер которого больше размера контейнера, будет применсять свойство flex-shrink (единственный случай, когда flex-shrink делает что-то полезное в многострочном контейнере).

Пример использования флексбоксов:

.flex-container { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    align-content: stretch;
    flex-wrap: wrap;
}
.element {
    align-self: stretch;
    order: -1;
    flex-basis: 100px;
    flex-grow: 1;
    flex-shrink: 2; 
}

Блоки растянутся на всю высоту контейнера.

Изображения взяты: тут