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-startspace-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/
Last updated