Flexbox верстка

Введение

Flexbox — это общее название для модуля Flexible Box Layout, который имеется в CSS3. Данный модуль определяет особый режим верстки пользовательского интерфейса, который называется flex layout. В этом плане Flexbox предоставляет иной подход к созданию пользовательского интерфейса, который отличается от табличной или блочной верстки.

Его создали, чтобы удобно и быстро распределять и выравнивать элементы. Развернутое описание стандарта по модулю можно посмотреть в спецификации.

Основными составляющими компоновки flexbox являются flex-контейнер (flex container) и flex-элементы (flex items). Flex container представляет некоторый элемент, внутри которого размещены flex-элементы.

Flexbox управляет пустотой вокруг вложенных контейнеров! Таким образом, margin: auto центрирует дочерние элементы по вертикали и горизонтали.

Создание flex-контейнера

Для создания flex-контейнера необходимо присвоить его стилевому свойству display одно из двух значений: flex (блочный элемент) или inline-flex (строчный элемент).

Создадим простейшую веб-страницу, которая применяет flexbox:

<div class="flex-container">
    <div class="flex-item color1">Flex Item 1</div>
    <div class="flex-item color2">Flex Item 2</div>
    <div class="flex-item color3">Flex Item 3</div>
</div>
.flex-container {
    display: flex;
}
.flex-item {
    text-align:center;
    font-size: 1.1em;
    padding: 1.5em;
    color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}

Направление flex-direction

Flex-элементы во flex-контейнере могут иметь определенное направление, а именно они могут располагаться в виде строк или в виде столбцов. Для управления направлением элементов CSS3 предоставляет свойство flex-direction. Оно определяет направление элементов и может принимать следующие значения:

  • row: значение по умолчанию, при котором элементы располагаются в виде строки слева направо

  • row-reverse: элементы также располагаются в виде стоки только в обратном порядке справа налево

  • column: элементы располагаются в столбик сверху вниз

  • column-reverse: элементы располагаются в столбик в обратном порядке снизу вверх

flex-wrap

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

  • nowrap: значение по умолчанию, которое определяет flex-контейнер, где все элементы раполагаются в одну строку (при расположении в виде строк) или один столбец (при расположении в столбик)

  • wrap: если элементы не помещаются во flex-контейнер, то создает дополнительные ряды в контейнере для размещения элементов. При расположении в виде строки содаются дополнительные строки, а при расположении в виде столбца добавляются дополнительные столбцы

  • wrap-reverse: то же самое, что и значение wrap, только элементы располагаются в обратном порядке

flex-flow. order. Порядок элементов

Свойство flex-flow позволяет установить значения сразу для обоих свойств flex-direction и flex-wrap. Оно имеет следующий формальный синтаксис:

flex-flow: [flex-direction] [flex-wrap]

Причем второе свойство — flex-wrap можно в принципе опустить, тогда для него будет использоваться значение по умолчанию - nowrap.

Свойство order позволяет установить группу для flex-элемента, позволяя тем самым переопределить его позицию внутри flex-контейнера. В качестве значения свойство принимает числовой порядок группы. К одной группе может принадлежать несколько элементов.

Например, элементы в группе 0 располагаются перед элементами с группой 1, а элементы с группой 1 располагаются перед элементами с группой 2 и так далее.

Выравнивание элементов

justify-content

Иногда мы можем сталкиваться с тем, что пространство flex-контейнеров по размеру отличается от пространства, необходимого для flex-элементов. Например:

  • flex-элементы не используют все пространство flex-контейнера

  • flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-conten. Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца - по вертикали) и принимает следующие значения:

  • flex-start: значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.

  • flex-end: последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее

  • center: элементы выравниваются по центру

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

  • space-around: если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center. В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.

  • space-evenly: расстояние между флекс-элементами, а так же между контейнером и крайними элементами становится одинаковым.

align-items и align-self

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

  • stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера

  • flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера

  • flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера

  • center: элементы выравниваются по центру flex-контейнера

  • baseline: элементы выравниваются в соответствии со своей базовой линией (середина первого флекс-элемента)

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение "auto" — значение по умолчанию, при котором элемент получает значение от свойства align-items, которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch.

align-content

Свойство align-content управляет выравниванием рядов (строк и столбцов) во flex-контейнере и поэтому применяется, если свойство flex-wrap имеет значение wrap или wrap-reverse. Свойство align-content может иметь следующие значения:

  • stretch: значение по умолчанию, при котором строки (столбцы) растягиваются, занимая все свободное место

  • flex-start: строки (столбцы) выравниваются по началу контейнера (для строк - это верхний край, для столбцов - это левый край контейнера)

  • flex-end: строки (столбцы) выравниваются по концу контейнера (строки - по нижнему краю, столбцы - по правому краю)

  • center: строки (столбцы) позиционируются по центру контейнера

  • space-between: строки (столбцы) равномерно распределяются по контейнеру, а между ними образуются одинаковые отступы. Если же имеющегося в контейнере места недостаточно, то действует аналогично значению flex-start

  • space-around: строки (столбцы) равным образом распределяют пространство контейнера, а растояние между первой и последней строкой (столбцом) и границами контейнера составляет половину расстояния между соседними строками (столбцами).

Стоит учитывать, что это свойство имеет смысл, если в контейнере две и больше строки (столбца).

Управление элементами. flex-basis, flex-shrink и flex-grow

Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые позволяют управлять элементами:

  • flex-basis: определяет начальный размер flex-элемента

  • flex-shrink: определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере

  • flex-grow: определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

Свойство flex является объединением свойств flex-basis, flex-shrink и flex-grow и имеет следующий формальный синтаксис:

flex: [flex-grow] [flex-shrink] [flex-basis]

Papers and notes

Официальная документация flexbox: https://www.w3.org/TR/css-flexbox-1/

Наглядно посмотреть свойства flexbox: https://codepen.io/justd/full/yydezN/

Изучение flexbox в формате игры: https://flexboxfroggy.com/#ru

Тонкости в flexbox: https://habr.com/ru/articles/329820/

PreviousБлочная версткаNextGrid Layout верстка

Last updated