И хотя flex-сеткой мы уже пользуемся, настало время разобрать её по косточкам css-свойствам.
Для начала следует понимать, что flex-сетка всегда состоит из контейнера и внутренних ячеек, как в игре «пятнашки». Свойства контейнера задают поведение всех ячеек. При этом у ячеек тоже могут быть указаны персональные свойства, задающее её особое поведение.
У flex-блока всегда есть две оси — главная и поперечная. Обычно мы за главную принимаем горизонтальную ось, тогда вертикальная будет поперечной. Можно поменять такое поведение и тогда оси меняются местами. Это примерно как повернуть сетку на 90 градусов.
flex-direction: row; flex-direction: row-reverse; flex-direction: collumn; flex-direction: collumn-reverse;
Значение row
— это привычная горизонтальная ось. С row-reverse
тоже самое, только в обратном направлении справа на лево. Если указать collumn
, то основная ось будет уже вертикальная, а collumn-reverse
- вертикальная, но снизу вверх.
Все примеры вы сможете посмотреть на специальном сайте flexbox.help на котором наглядно в интерактивном режиме можно посмотреть работу flex-свойств. Ввиду сложности кода, я не буду здесь приводить примеры отображения.
Как правило мы работаем с flex-direction: row;
.
По умолчанию для flex запрещен перенос ячеек на новую строчку. Чтобы её разрешить используется свойство flex-wrap:
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse;
Теперь, чтобы не путаться, запомните простое правило: для управления ячейками вдоль главной оси используются свойства justify-
, а для управления вдоль поперечной — align-
. В нашем случае по горизонтали — это justify-
, по вертикали — align-
.
У justify-content есть несколько значений (фактически типовые для многих flex-свойств):
justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between;
C flex-start
ячейки прижимаются к началу главной оси, с flex-end
к концу, а с center
— выравниваются по центру.
Значения space-around
и space-between
распределяют ячейки по всей ширине так, что между ними образуются пустые промежутки. Если это space-around
, то промежутки создаются и от границ контейнера (нижние ячейки при этом центрируются), а если указать space-between
, то крайние ячейки плотно прилегают к краям контейнера. Flex-сетка с space-between
считается обычной «резиновой» сеткой, которая очень часто используется при верстке. В частности в UniCSS в классе flex
сразу прописывается это свойство.
Выравнивание по поперечной оси (вертикально) задется через align-content, которое работает также как и justify-content
и может иметь значение stretch.
align-content: stretch; align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-around; align-content: space-between;
Важный момент — свойство align-content
работает только когда разрешен wrap-перенос.
Значение stretch
растягивает ячейки на всю возможную ширину или высоту.
Когда ячейки в одну строку или запрещен wrap-перенос используется свойство align-items
:
align-items: stretch; align-items: baseline; align-items: center; align-items: flex-start; align-items: flex-end;
Комбинации всех этих свойств позволяют создавать разные flex-сетки. Если стоит задача сделать какой-то особый вариант, то используйте приведённый выше flex-построитель.
Помимо свойств контейнера, существуют свойства отдельных flex-элементов.
Свойство order позволяет задать порядок следования ячейки. По умолчанию у всех ячеек order: 0;
.
Свойство flex-grow
задаёт «жадность» элемента. По умолчанию оно flex-grow: 1;
. Чем больше число, тем больше будет размер элемента. Данное свойство часто используется там, где нет возможности указать точную ширину. В этом случае предполагают их возможные соотношения.
... <div style="flex-grow: 0;">A</div> <div style="flex-grow: 10;">B</div> <div style="flex-grow: 20;">C</div> ...
Здесь приоритет будет отдан блоку C в 2 раза больше, чем блоку B. Блок A получит только то что осталось.
Есть еще одно свойство — flex-shrink
, которое работает также как и flex-grow
, только наоборот — указывает на фактор «сжимаемости». Обычно им редко пользуются.
Свойство flex-basis
задает базовый размер ячйки в px, % и т.п. Это свойство также используется редко.
У отдельной ячейки ещё можно задать некоторые параметры через свойство align-self.
align-self: stretch; align-self: baseline; align-self: center; align-self: flex-start; align-self: flex-end;
Поведение аналогично описанным выше, но только в пределах своей строки. По своему назначению flex-сетка ориентируется на единое поведение всех ячеек, поэтому выделение какой-то ячейки немного выходит за эти границы.
У flex-сетки есть одно замечательно свойство, о котором давно мечтали верстальщики — вертикальное выравнивание. Например вот так можно отцентрировать один блок внутри другого с помощью margin: auto;
<div style="display: flex; height: 200px; background: silver;"> <div style="width: 150px; height: 50px; background: red; margin: auto;"></div> </div>
1. Посмотрите на странице UniCSS Cheatsheet какие существуют классы для flex-сетки.