И хотя 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-сетки.