Что такое flex css. Метод позиционирования элементов Flexbox

CSS3-flexbox — это специальная технология, которая была введена в последней версии каскадных стилей, позволяющая задавать гибкую сетку расположения блоков внутри некоторого контейнера-родителя.

Какие возможности дает данная сетка:

• возможность управлять колончатой структурой основного каркаса html-вёрстки;
• управлять ориентацией расположения html-тэгов подобно табличной верстке;
• управлять порядком расположения;
• и многие другие.

Сама технология css-flexbox стоит на базировании блоков в относительной гоизонталдьной и вертикальной осей согласно следующей схемы:

Навигация

Приведем список веб-обозревателей, которые поддерживают рассматриваемое свойство блоков как стандартно, так и с применением спецпрефиксов:

ИЕ: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Хром: 29.0, 21.0 -webkit-
Сафари: 6.1 -webkit-
Опера: 12.1 -webkit-
Сафари (под Мак): 7.0 -webkit-
Опера-Мини: 8
Анройд-Браузер: 4.4, 4.1 -webkit-
Хром (под Андройд): 44

1.1. Свойство display: flex

CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:

• display: flex; — для блокового отображения;
• display: inline-flex; — для инлайнового отображения.

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

1.2. Выравниваем горизонтально justify-content

Правило используется для того, чтобы выровнять горизонтально дочерние объекты внутри родительского flexbox-контейнера. Данное правило не наследуется.

justify-content
Значения:
flex-start	Выравнивает по левой кромке. Дефолтное значение
flex-end	Выравнивает по правой кромке.
center	Выравнивает по середине.
space-between	По всей ширине родителя на равновеличинные отрезки. Стоит отметить, что первый элемент приживается к левому краю без пустот, но с учетом паддингов, а последний также, но к правому краю. Все остальные блочные элементы размещаются между первым и последним через одинаковые отрезки пустоты.
space-around	По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина.
initial	Задание дефолтного значения.
inherit

Формат записи

B-podlogka { height: 120px; background-color: #ddd; margin: 0px; padding: 10px; display: flex; display: -webkit-flex; justify-content: flex-start; -webkit-justify-content: flex-start; }

B-podlogka { justify-content: flex-end; }

B-podlogka { justify-content: center; }

B-podlogka { justify-content: space-between; }

B-podlogka { justify-content: space-around; }

1.3. Вертикальное выравнивание align-items

Свойство используется для того, чтобы выровнять вертикально дочерние объекты внутри родительского flexbox-контейнера. Следует отметить, что под это выравнивание также подпадают и анонимные флекс-итемы. Данное правило не наследуется. Выравниваются только блоки первой строки.

align-items
Значения:
stretch	Флексбокс-блоки, если не зафиксирована высота, вытягиваются на всю высоту родительского контейнера. Является первоначальным (базовым) параметром.
flex-start	Предназначено для выравнивания флексбокс-итемов по верхней кромке контейнера-родителя с учетом внутренних отступов (padding).
flex-end	Предназначено для выравнивания флексбокс-итемов по нижней кромке контейнера-родителя с учетом внутренних отступов (padding).
center	Выравнивает дочерние флекс-блоки внутри флекс-контейнера по средней линии самого высокого блока.
baseline	Выравнивает дочерние флекс-блоки внутри родительского относительно средней линии текста в этих блоках.
initial
inherit	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

B-podlogka { align-items: stretch; -webkit-align-items: stretch; }

Следует отметить, для того, чтобы дочерние флекс-блоки растянулись на всю высоту контейнера, необходимо чтобы у них не было устанолвено фиксированной высоты: height: auto; .

B-podlogka { align-items: flex-start; }

B-podlogka { align-items: flex-end; }

B-podlogka { align-items: center; }

B-podlogka { align-items: baseline; }

1.4. Ориентация основной оси flex-direction

Применяется для задания ориентации (направленности) следования flex-блоков друг за другом. В соответствии с установленными стандартами ориентация может быть двух видов: по вертикали (в колонку, по дефолту?) и по горизонтали (в строку, по дефолту?).

Формат записи

B-podlogka { flex-direction: row; -webkit-flex-direction: row; }

B-podlogka { flex-direction: row-reverse; }

B-podlogka { flex-direction: column; }

B-podlogka { flex-direction: column-reverse; }

1.5. Размещение в несколько строк flex-wrap

Отвечает за размещение дочерних flex-блоков в одну или несколько строк.

flex-wrap
Значения:
nowrap	В исходном состоянии все дочерние итемы располагаются в одну строчку (? или? в зависимости от выбранной ориентации текста).
wrap	При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя (? или? в зависимости от выбранной ориентации текста).
wrap-reverse	При задании такого параметра дочерние итемы будут занимать несколько строк в зависимости от ширины родителя, имея при этом реверсивный порядок чередования.
initial	Будет установлено в первоначальное значение.
inherit	Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Формат записи

B-podlogka { flex-wrap: wrap; -webkit-flex-wrap: wrap; }

B-podlogka { flex-wrap: wrap-reverse; }

1.6. Направленность и многострочность одним правилом flex-flow

Данное правило используется, как более компактная запись двух предыдущих правил с целью оптимизации кода.

Формат записи

B-podlogka { flex-flow: row wrap; -webkit-flex-flow: row wrap; }

1.7. Выравниваем вертикально во всех строках align-content

Это цсс-правило используется для того, чтобы выровнять вертикально внутриконтейнейрные дочерние флекс-блоки. Для срабатывания этого правила необходимо, чтобы были у родительского контейнера заданы: height и flex-flow. Является не наследуемым.

align-content
Значения:
stretch	Растягивание элементов на всю высоту родительского контейнера (у флекс-блоков не должна быть зафиксирована высота).
flex-start	Выравнивает поверху.
flex-end	Выравнивает понизу.
center	Выравнивает вертикально по центру.
space-between	Вертикально выравнивает внутриконтейнерные элементы таким образом, что первая линия блоков прижимается кверху, последняя — книзу, а пространство между остальными распределяется равномерно.
space-around	Вертикально выравнивает внутриконтейнерные элементы таким образом, что расстояние в начале, в конце и между ними равны между собой.
initial	Будет установлено в первоначальное значение.
inherit	Опция для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.

Пример кода

B-podlogka { height: 120px; flex-flow: row wrap; align-content: stretch; }

B-podlogka { align-content: flex-start; }

B-podlogka { align-content: flex-end; }

B-podlogka { align-content: center; }

B-podlogka { align-content: space-between; }

B-podlogka { align-content: space-around; }

Кроме правил, используемых в отношении родителя-контейнера, во флексбокс-сетке существует несколько правил, применяемых к дочерним элементам. Рассмотрим их подробнее.

2.1. Упорядочивание блоков order

ЦСС-правило применяется для упорядочивания некоторого дочернего флекс-элемента внутри флекс-родителя. Для постановки блока в качестве первого ему необходимо указать 1, а для перемещения его в самый конец -1. Является не наследуемым.

Формат записи

B-div1 { -webkit-order: 1; order: 1; }

B-div5 { -webkit-order: -1; order: -1; }

2.2. Базис флекс-блока flex-basis

CSS-правило, предназначенное для фиксации ширины дочернего флекс-блока внутри родительского контейнера. Задается для срабатывания двух ниже лежащих параметров. Является не наследуемым правилом.

Пример кода

B-div3 { flex-basis: 70px; -webkit-flex-basis: 70px; }

Всем блокам задан базис в размере пятидесяти пикселей, а третьему — девяносто пикселей.

Спецификация Flexbox (Flexible Box Layout Module) – это метод позиционирования элементов в горизонтальном или вертикальном направлениях.

Flexbox объединяет в себе набор свойств для родительского flex-контейнера и для дочерних flex-элементов.

Чтобы элемент стал flex-контейнером, ему надо присвоить display: flex; или display: inline-flex; (блочный или строчный соответственно).

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

Свойства flex-контейнера
flex-direction	Определяет направление главной оси. Возможные значения: row – слева направо (по умолчанию); row-reverse – справа налево; column – сверху вниз; column-reverse – снизу вверх.
flex-wrap	Определяет многострочность контейнера. Возможные значения: nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию); wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну; wrap-reverse – похоже на wrap , но перенос происходит снизу вверх.
flex-flow	Определяет сразу два параметра: flex-direction и flex-wrap. Например, flex-flow: column wrap;
justify-content	Определяет выравнивание элементов по главной оси. Возможные значения: flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию); flex-end – flex-элементы прижимаются к концу главной оси; center – flex-элементы выравниваются по центру главной оси; space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний - к концу; space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.
align-items	Определяет выравнивание элементов по поперечной оси. Возможные значения: flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию); flex-end – flex-элементы прижимаются к концу поперечной оси; center – flex-элементы выравниваются по центру поперечной оси; baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»; stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.
align-content	Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения: flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию); flex-end – строки flex-элементов прижимаются к концу поперечной оси; center – fстроки flex-элементов выравниваются по центру поперечной оси; space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя - к концу; space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками. stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован. Это свойство не работает для однострочного flex-контейнера.

Свойства flex-элементов
order	Определяет порядок следования отдельно взятого flex-элемента внутри flex-контейнера. Задается целым числом. По умолчанию равно 0, тогда элементы следуют друг за другом в порядке естественного потока. Значение order задает вес позиции элемента в последовательности, а не абсолютную позицию.
flex-basis	Определяет базовый размер flex-элемента перед распределением пространства в контейнере. Может быть задан в px, %, em и остальных единицах измерения. По сути это своего рода отправная точка, относительно которой происходит растягивание или сжатие элемента. Значение по умолчанию – auto , при этом размер элемента зависит от размера внутреннего контента.
flex-grow	Определяет, какую долю свободного места внутри контейнера добавит к своему базовому размеру flex-элемент. Задается целым числом, служащим пропорцией. По умолчанию равно 0. Если у всех элементов flex-grow: 1 , то все они будут одинакового размера. Если одному flex-элементу задать значение 2, то к его базовому размеру добавится в два раза больше, чем к другим.
flex-shrink	Определяет, на сколько в случае недостатка места будет уменьшаться flex-элемент относительно уменьшения соседних элементов внутри flex-контейнера. Задается целым числом, служащим пропорцией. По умолчанию равно 1. Если одному flex-элементу задать значение flex-shrink: 2 , то из его базового размера вычтется в два раза больше, чем из других, если контейнер меньше, чем сумма базовых размеров входящих в него элементов.
flex	Определяет сразу три параметра: flex-grow, flex-shrink, flex-basis. Например, flex: 1 1 200px;
align-self	Переопределяет выравнивание, заданное по умолчанию или в align-items , для конкретного flex-элемента. Возможные значения: flex-start – flex-элемент прижимается к началу поперечной оси (по умолчанию); flex-end – flex-элемент прижимается к концу поперечной оси; center – flex-элемент выравнивается по центру поперечной оси; baseline – flex-элемент выравнивается по базовой линии; stretch – flex-элементы растягивается, занимая все доступное место по поперечной оси. Но если задана высота, то stretch будет проигнорирован.

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

flex-direction: column;

You"ll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.

Note : You can also lay out flex items in a reverse direction using the row-reverse and column-reverse values. Experiment with these values too!

Wrapping

One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example):

Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your element represents a standalone section - which doesn" t have a more specific semantic element to represent it contained within an html document.>

rule:

Flex-wrap: wrap; flex: 200px;

Try this now; you"ll see that the layout looks much better with this included:

We now have multiple rows - as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The flex: 200px declaration set on the articles means that each will be at least 200px wide; we"ll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.

But there"s more we can do here. First of all, try changing your flex-direction property value to row-reverse - now you"ll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.

flex-flow shorthand

At this point it is worth noting that a shorthand exists for flex-direction and flex-wrap - flex-flow . So for example, you can replace

Flex-direction: row; flex-wrap: wrap;

Flex-flow: row wrap;

Flexible sizing of flex items

Let"s now return to our first example, and look at how we can control what proportion of space flex items take up. Fire up your local copy of flexbox0.html , or take a copy of flexbox1.html as a new starting point (see it live).

First, add the following rule to the bottom of your CSS:

Article { flex: 1; }

This is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up. In this case, we are giving each element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.

Now add the following rule below the previous one:

Article:nth-of-type(3) { flex: 2; }

Section - article article article - div - button div button div button button button

Let"s look at the code we"ve used for the layout.

Summary

That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we"ll have a look at another important aspect of CSS layouts - CSS Grids.

And send us a pull request.

For most purposes, authors should set flex to one of the following values: auto , initial , none , or a positive unitless number. To see the effect of these values, try resizing the flex containers below:

auto

auto

auto

auto

initial

initial

auto

auto

none

initial

none

none

4

2

1

* { box-sizing: border-box; } .flex-container { background-color: #F4F7F8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1B5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; }

By default flex items don"t shrink below their minimum content size. To change this, set the item"s min-width or min-height .

Syntax

/* Keyword values */ flex: auto; flex: initial; flex: none; /* One value, unitless number: flex-grow */ flex: 2; /* One value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* Two values: flex-grow | flex-basis */ flex: 1 30px; /* Two values: flex-grow | flex-shrink */ flex: 2 2; /* Three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* Global values */ flex: inherit; flex: initial; flex: unset;

The flex property may be specified using one, two, or three values.

Values

initial The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting " flex: 0 1 auto ". auto The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting " flex: 1 1 auto ". none The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting " flex: 0 0 auto ". " name="%7B%LS%7D"flex-grow">"> <"flex-grow"> Defines the flex-grow " name="%7B%LS%7D"flex-shrink">"> "><"flex-shrink"> Defines the flex-shrink of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. " name="%7B%LS%7D"flex-basis">"> "><"flex-basis"> Defines the flex-basis of the flex item. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted.

Formal syntax

none "><"flex-grow"> "><"flex-shrink"> "><"flex-basis">

Example

#flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; }

Flex box (click to toggle raw box)

Raw box

Var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); flex.addEventListener("click", function() { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); #flex-container { width: 100%; font-family: Consolas, Arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; }

Result

Specifications

Specification	Status	Comment
CSS Flexible Box Layout Module The definition of "flex" in that specification.	Candidate Recommendation	Initial definition

Initial value
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Media	visual
Computed value	as each of the properties of the shorthand: flex-grow : as specified flex-shrink : as specified flex-basis : as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand: flex-grow : a CSS data type are interpolated as real, floating-point, numbers.">number flex-shrink : a CSS data type are interpolated as real, floating-point, numbers.">number flex-basis : a CSS data type are interpolated as real, floating-point numbers.">length , CSS data type are interpolated as real, floating-point numbers.">percentage or calc();
Canonical order	order of appearance in the formal grammar of the values

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
flex	Chrome Full support 29 Full support 29 Full support 21 Prefixed Prefixed	Edge Full support 12 Full support 12 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Full support 20 Notes Full support 20 Notes Notes Since Firefox 28, multi-line flexbox is supported. Notes Before Firefox 32, Firefox wasn"t able to animate values starting or stopping at 0 . Notes Until Firefox 61, flex items that are sized according to their content are sized using fit-content , not max-content . No support 18 - 28 Disabled Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 48 Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 11 Notes Full support 11 Notes Notes Internet Explorer 11 ignores uses of in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. Notes Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info. Full support 10

Давайте познакомимся со свойствами, предназначенными специально для flex-контейнера - элемента, которому задано свойство display со значением flex .

Свойство flex-direction

Свойство flex-direction позволяет управлять направлением главной оси flex-контейнера. Данное свойство предназначено для применения к контейнерам и принимает следующие значения:

• row (значение по умолчанию) - направление главной оси пролегает слева направо (как на схеме выше) для локали LTR и справа налево для локали RTL.
• row-reverse - здесь, наоборот, направление главной оси пролегает справа налево, если локаль LTR, и слева направо, если локаль RTL.
• column - направление главной оси пролегает сверху вниз.
• column-reverse - направление главной оси пролегает снизу вверх.

Работа этих значений выглядит следующим образом:

Направление row (строка, ряд) для локали LTR

Свойство justify-content

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

Свойство justify-content применяется к flex-контейнеру, и принимает такие значения:

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

Работа этих значений проиллюстрирована ниже:

Свойство align-items

Align-items - еще одно свойство, применяемое к flex-контейнеру для выравнивания его дочерних элементов. Только на этот раз выравнивание происходит не по главной оси, а по поперечной. Рассмотрим список значений:

• stretch (значение по умолчанию) - flex-элементы растягиваются вдоль поперечной оси (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
• flex-start - flex-элементы прижимаются к началу поперечной оси.
• flex-end - flex-элементы прижимаются к концу поперечной оси.
• center - flex-элементы центрируются по поперечной оси.
• baseline - flex-элементы выравниваются по своим базовым линиям.

Примеры для лучшего понимания информации:

Свойство flex-wrap

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

• nowrap (значение по умолчанию) - flex-элементы размещаются в одной линии, слева направо (либо справа налево для локации RTL).
• wrap - flex-элементы выстраиваются горизонтально в несколько рядов (при условии, что они не помещаются в один ряд). Направление элементов - слева направо (или справа налево для RTL).
• wrap-reverse - принцип действия идентичен предыдущему свойству, с той лишь разницей, что расположение flex-элементов происходит в реверсном порядке.

Свойство flex-flow

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

Flex-flow: column wrap-reverse;

Свойство align-content

Данное свойство работает только в том случае, если flex-контейнер поддерживает многострочность. При помощи align-content можно указать, как будут выравниваться ряды flex-элементов по вертикали. Доступные значения:

• stretch (значение по умолчанию) - ряд flex-элементов растягивается по вертикали, пока не упрется в следующий ряд (если при этом указаны свойства min-width / max-width , они принимаются во внимание).
• flex-start - ряды flex-элементов прижимаются к началу flex-контейнера.
• flex-end - ряды flex-элементов прижимаются к концу flex-контейнера.
• center - ряды flex-элементов вертикально центрируются во flex-контейнере.
• space-between - первый ряд flex-элементов находится в начале flex-контейнера, последний ряд flex-элементов - в конце, а все остальные ряды равномерно распределяются в пределах оставшегося пространства.
• space-around - все ряды flex-элементов равномерно распределяются в вертикальном пространстве flex-контейнера, при этом свободное пространство поровну делится между ними.