Двадцать первый урок. Описание Flexbox-модели

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