Flex контейнер: Свойства flex-контейнера | WebReference

Свойства flex-контейнера | WebReference

flex-direction

Это свойство указывает, как flex-элементы располагаются во flex-контейнере, задавая направление главной оси flex-контейнера. Элементы могут располагаться по двум основным направлениям — как строки по горизонтали или как столбцы по вертикали.

Значения

Со значением row flex-элементы располагаются в ряд слева направо в контексте ltr.

.flex-container {
  flex-direction: row;
}

При значении row-reverse flex-элементы располагаются в ряд справа налево в контексте ltr.

.flex-container {
  flex-direction: row-reverse;
}

Со значением column flex-элементы располагаются в колонку сверху вниз.

.flex-container {
  flex-direction: column;
}

При значении column-reverse flex-элементы располагаются в колонку снизу вверх.

Значение по умолчанию: row.

row и row-reverse зависят от режима написания, так что в контексте rtl они будут соответственно перевёрнуты.

flex-wrap

Исходная концепция flexbox — это контейнер для установки своих элементов в одну строку. Если flex-контейнер располагает свои элементы в одну или несколько строк, то свойство flex-wrap управляет направлением, в котором эти новые строки располагаются.

Значения

.flex-container {
  flex-wrap: nowrap;
}

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

.flex-container {
  flex-wrap: wrap;
}

flex-элементы отображаются в несколько строк, если это необходимо, слева направо и сверху вниз.

.flex-container {
  flex-wrap: wrap-reverse;
}

flex-элементы отображаются в несколько строк, если это необходимо, слева направо и снизу вверх.

Значение по умолчанию: nowrap.

Эти свойства зависят от режима написания, поэтому в контексте rtl они будут соответственно перевёрнуты.

flex-flow

Это свойство является сокращением для установки свойств flex-direction и flex-wrap.

Значения

.flex-container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

Значение по умолчанию: row nowrap.

justify-content

Свойство justify-content выравнивает flex-элементы вдоль главной оси текущей строки flex-контейнера. Свойство помогает распределять оставшееся свободное пространство, когда все flex-элементы в строке не растягиваются или растягиваются, но достигли максимального размера.

Значения

.flex-container {
  justify-content: flex-start;
}

flex-элементы выравниваются по левой стороне flex-контейнера в контексте ltr.

.flex-container {
  justify-content: flex-end;
}

flex-элементы выравниваются по правой стороне flex-контейнера в контексте ltr.

.flex-container {
  justify-content: center;
}

flex-элементы выравниваются по центру flex-контейнера.

.flex-container {
  justify-content: space-between;
}

flex-элементы отображаются с равным интервалом между ними, первый и последний flex-элементы выравниваются по краям flex-контейнера.

.flex-container {
  justify-content: space-around;
}

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

Значение по умолчанию: flex-start.

align-items

flex-элементы могут быть выровнены по поперечной оси текущей строки flex-контейнера, подобно justify-content, но в перпендикулярном направлении. Это свойство устанавливает выравнивание по умолчанию для всех flex-элементов, включая анонимных.

Значения

 .flex-container {
  align-items: stretch;
}

flex-элементы заполняют всю высоту (или ширину) от поперечного начала до поперечного конца flex-контейнера.

. flex-container {
  align-items: flex-start;
}

flex-элементы располагаются у поперечного начала flex-контейнера.

.flex-container {
  align-items: flex-end;
}

flex-элементы располагаются у поперечного конца flex-контейнера.

.flex-container {
  align-items: center;
}

flex-элементы располагаются в центре поперечной оси flex-контейнера.

.flex-container {
  align-items: baseline;
}

flex-элементы выравниваются таким образом, чтобы их базовые линии были выровнены.

Значение по умолчанию

Подробнее о том, как рассчитываются базовые линии, читайте здесь.

align-content

Свойство align-content выравнивает строки внутри flex-контейнера, когда в поперечной оси имеется дополнительное пространство, подобно тому, как justify-content выравнивает отдельные элементы по главной оси.

Значения

. flex-container {
  align-content: stretch;
}

flex-элементы отображаются с дополнительным пространством после каждой строки flex-элементов.

.flex-container {
  align-content: flex-start;
}

flex-элементы располагаются стопкой возле поперечного начала flex-контейнера.

.flex-container {
  align-content: flex-end;
}

flex-элементы располагаются стопкой возле поперечного конца flex-контейнера.

.flex-container {
  align-content: center;
}

Строки flex-элементов располагаются в центре поперечной оси flex-контейнера.

.flex-container { 
  align-content: space-between;
}

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

.flex-container {
  align-content: space-around;
}

flex-элементы отображаются с равным интервалом вокруг каждой строки.

Значение по умолчанию: stretch.

Это свойство имеет эффект только тогда, когда flex-контейнер содержит несколько строк flex-элементов. Если элементы располагаются в одну строку, свойство align-content никак не влияет на макет.

Замечания

• Все свойства column-* не оказывают влияния на flex-контейнер.
• Псевдоэлементы ::first-line и ::first-letter не применяются к flex-контейнерам.

См. также

• align-content
• align-items
• flex-direction
• flex-wrap
• justify-content
• place-content
• Адаптивный макет на флексбоксах
• Вложенные флекс-контейнеры
• Выравнивание с помощью флексбоксов
• Выравнивание элементов форм
• Направление флексбоксов
• Создание медиа-объектов
• Точки между слов

Автор и редакторы

Автор: Димитар Стоянов

Последнее изменение: 20. 02.2019

Редакторы: Влад Мержевич

Использование
Ctrl+←

Свойства flex-элементов
Ctrl+→

25. flexbox · Неожиданный HTML

Ранее мы уже рассмотрели систему верстки на inline-block элементах. Теперь давайте рассмотрим flexbox-верстку, то есть систему «гибких» блоков.

Для старта создадим контейнер

.container {
    display: flex; /* или inline-flex */
}

Теперь все вложенные блоки стали «flex», то есть применение flex-свойств для контейнера будет воздействовать и на них. Также для блоков становятся доступны отдельные flex-свойства.

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

Создадим внутри контейнера блок и рассмотрим его поведение

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style. css">
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>

css к этому шаблону

.container {
    display: flex;
    background-color: lightgrey;
}
.flex_block {
    background-color: cornflowerblue;
    height: 200px;
}

Несмотря на то, что блок находится внутри контейнера, мы его не видим, потому ни ширину, ни flex-basis мы не задали. Разберемся как исправить эту ситуацию.

Поведение flex-блоков

Резберемся как теперь поменялось поведение вложенных блоков

flex-basis

Мы можем сжимать и растягивать блок, но в каком именно состоянии мы находимся будет определять flex-basic. То есть, если ширина блока стала меньше flex-basic — сначит он сжимается, если больше,то растягивается.

Добавим flex-basis:700px; в наш flex_block и посмотрим, что получится

.flex_block {
    background-color: cornflowerblue;
    height: 200px;
    flex-basis:700px;
}

При этом при расширении блок будет оставаться 700px, но вот, если экран станет уже 700px, то блок начнет сжиматься вместе с экраном.

flex-grow — определяет как будет распределятся избыточное пространство между ширинами блока. 0 — значение по умолчанию, то есть блок никак не расширяется, если даже есть пространство.

По сути с появлением flex-grow блок начинает занимать свободное от flex-basis’a пространство. flex-grow показывает какую часть этого свободного пространства мы заберем.

flex-shrink — определяет как распределяется «негативное» пространство(то есть сколько пикселей нам не хватает, чтобы полностью разместить все блоки по ширине) между ширинами блоков. 1 — значение по умолчанию и его можно только уменьшать. 0 — будет означать, что ширина блока не изменяется при сжатии. Т.е. мы негативное пространство умножаем на коэфициент, указанный в flex-shrink.

Пример

Теперь попробуем разобраться как работают эти свойства на примере.

Сделаем четыре блока и обернем каждый в контейнер, чтобы они не влияли друг на друга.

    <div>
        <div>
        </div>
    </div>
    <div>
        <div>
        </div>
    </div>
    <div>
        <div>
        </div>
    </div>
    <div>
        <div>
        </div>
    </div>

Добавим необходимый CSS

Все контейнеры будут display:flex

. container {
    display: flex;
    background-color: lightgrey;
}

flex_block(синий)

Блок с классом flex_block будет у нас отвечать за поведение блока внутри flex-контейнера по умолчанию, без задания свойств flex-grow и flex-shrink.

.flex_block {
    background-color: cornflowerblue;
    height: 200px;
    flex-basis:700px;
}

Если мы посмотрим на поведение этого блока, то увидим, что когда свободное пространство есть, блок занимает ширину, указанную в flex-basis. Но при сжатии шаблона менее, чем на 700px, блок также начинает сжиматься.

fluid_block(фиолетовый)

fluid_block будет имитировать резиновый блок, который занимает всё свободное пространство. Правда при наличии других блоков, его поведение может отличаться от «чистого» резинового блока с шириной, заданной через %.

.fluid_block {
    background-color: purple;
    height: 200px;
    flex-basis:700px;
    flex-grow:1;
    flex-shrink:1;
}

Мы видим, что несмотря на flex-basis:700px, fluid_block — занимает всё свободное пространство, если оно есть. При сжатии, он также сжимается вместе с контейнером.

.half_fluid_block(оранжевый)

Пожалуй блок с наиболее интересным поведением

.half_fluid_block {
    background-color: orange;
    height: 200px;
    flex-basis:700px;
    flex-grow:0.5;
    flex-shrink:0.5;
}

flex-grow:0.5 заставляет забирать свободное пространство не целиком, а только его половину. Это хорошо видно рядом с flex_block и fluid_block. fluid_block забирает всё свободное пространство, flex_block никак не реагирует, а half_fluid_block забирает себе половину от разницы между fluid_block и flex_block.

Аналогично особенности flex-shrink:0.5 можно посмотреть на примере fluid_block’a и fixed_block’a. При сжатии half_fluid_block сокращает расстояние, но в два раза меньше, чем fluid_block

.fixed_block(черный)

Пример блока с фиксированной шириной, но построенного внутри flex-контейнера. Ширину блока по сути определяет в этой ситуации flex-basis. При наличии избыточного пространства блок никак не реагирует. При сжатии меньше, чем на 700px блок заставляет появиться скроллинг у окна.

.fixed_block {
    background-color: black;
    height: 200px;
    flex-basis:700px;
    flex-grow:0;
    flex-shrink:0;
}

flex — обобщенное свойсво, которое задает flex-grow, flex-shrink и flex-basis одновременно.

Есть несколько специальных значений, которые позволяют еще сократить описание.

Например если нам нужен полностью резиновый блок, мы можем воспользоваться значением

flex:auto;

тоже самое, что

flex:1 1 auto;

то есть flex-grow и flex-shrink по единице, flex-basis auto

Если мы хотим получить блок с фиксированной шириной, без растяжения и без сжатия, то нам подойдет значение flex:none

flex:none;

тоже самое, что

flex:0 0 auto;

то есть flex-grow и flex-shrink по нулям (то есть у нас нет растяжения и сжатия) и flex-basis:auto;

Резиновый блок во всю ширину экрана можно сделать вот так

flex:0 0 100%;

Полезное чтиво:

1. Подробнее о интересных значениях flex: https://css-tricks. com/almanac/properties/f/flex/

2. Наглядное объяснение, как работает flex-grow https://css-tricks.com/flex-grow-is-weird/

Переносы в шаблонах

flex-wrap — определяет как именно будут переносится блоки внутри контейнера

По умолчанию переносов нет, и мы будем видеть сжатие элементов при сжатии контейнера больше чем сумарная ширина блоков.

flex-wrap: nowrap;

Но мы можем добиться переноса с помощью

flex-wrap: wrap;

Полезное чтиво:

Разбор верстки шаблона https://stackoverflow.com/questions/26160839/css-flex-box-layout-full-width-row-and-columns

Выравнивание flex-блоков внутри контейнера

Теперь можем задать направление flex’a

flex-direction определяет как именно будут располагаться блоки в контейнере и направление основной оси.

flex-direction: row | row-reverse | column | column-reverse;

flex-direction:row — располагает блоки в ряд, прижимая их к левому краю.

flex-direction:row-reverse — — располагает блоки в ряд, прижимая их к правому краю.

flex-direction: column — выстраивает блоки в колонку

Важный момент: при выборе значений column и column-reverse flex-basis становится

flex-flow — обобщенное свойство для flex-direction и flex-wrap. Например:

flex-flow: row wrap

justify-content — выравнивание контента по ширине(по основной оси. При смене flex-direction на column будет выравнивать по вертикали)

justify-content: flex-start; — по левому краю

justify-content: flex-end; — по правому краю

justify-content: center; — по центру

justify-content: space-between; — распределяет избыточное расстояние равномерно между блоками. Слева и справа от блоков отступов нет.

justify-content: space-around; — распределяет пространство равномерно слева и справа от каждого блока.

align-items — выравнивание по вертикали(по вспомогательной оси. При смене flex-direction на column будет выравнивать по горизонтали)

align-items: stretch — растягивает вложенные блоки на всю высоту контейнера.

align-items: flex-start — прижимает вложенные блоки к верху контейнера.

align-items: flex-end — прижимает вложенные блоки к низу контейнера

align-items: center

align-items: baseline — выравнивает вложенные блоки по низу контента внутри них.

align-content — распределение контента внутри контейнера по вертикали.

align-self — индивидуальное выравнивание вложенного блока.

order — определяет порядок блоков внутри flex-контейнера. Это свойство удобно использовать в media-запросах для перестройки шаблона.

order

Все способы вертикального выравнивания

https://habrahabr.ru/company/netcracker/blog/277433/

Мануалы по flexbox:

1. Хороший мануал, с интерактивными примерами http://html5. by/blog/flexbox/

2. Мануал от scoth https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

3. Визуализация некоторых свойств flexbox https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.oedaqgnkb

4. Статья по flexbox от Smashing Magazine https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/

5. https://paulrobertlloyd.com/2016/03/logical_flexbox

6. Мануал от CSS-tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Интересное чтиво

1. 11 вещей, которые я узнал читая спецификацию по flexbox https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
2. Примеры шаблонов сделанных на flexbox http://learnlayout.com/flexbox.html

3. Принудительный перенос flex-блоков https://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox

4. Приклеенный футер на flex https://philipwalton. github.io/solved-by-flexbox/demos/sticky-footer/

5. flexbox-техники, о которых строит знать https://habr.com/ru/post/302130/

6. Генерация выпадающего меню на flexbox https://scrimba.com/p/pRB9Hw/cgwQ8C6

7. Игра, которая помогает разобраться с flexbox https://flexboxfroggy.com/#ru

Практика:

1. Создаем шаблон на весь экран с резиновыми сайдбаром и контентом
   

2. Создаем шаблон из предыдущего задания, но с фиксированным сайдбаром и резиновым контентом.

3. Создаем с двумя фиксированными сайдбарами и контентом

4. Резиновый шаблон с двумя фиксированными колонками по бокам

5. Создаем резиновый сайт(на всю ширину экрана) с тремя блоками (см рисунок)
   

6. Есть четыре блока с фоновыми картинками, занимающие всю ширину экрана. Сделать, чтобы при наведении на блок, он расширялся, уменьшая ширину остальных.

7. Выровнять блок по середине экрана.

8. Сделать блок во весь экран

9. Выровнять несколько строчек по середине блока (по вертикали и горизонтали)

10. Сделать меню, в котором элементы меню разной ширины, но на одинаковом расстоянии друг от друга.

11. Сделать шаблон с четырьмя колонками, где колонки резиновые, но на одинаковом расстоянии друг от друга

12. Делаем шаблон с приклеенным футером

13. Макет: центральная область(серые блоки) должна быть фиксированной, а синяя полоска резиновой.

14. Есть контент и правый сайдбар. При сужении сайдбар должен переходить наверх.

15. Используем flex-direction, чтобы горизонтальное меню превращалось в вертикальное при переходе в мобильную версию.

16. Сделать чтобы при сжатии горизонтального меню элементы уходили под кнопку «Больше» и помещались в выпадающее меню

Контейнер CSS Flexbox

❮ Предыдущий Далее ❯

Родительский элемент (контейнер)

Как мы указывали в предыдущей главе, это гибкий контейнер . (синяя область) с тремя элементами flex :

Гибкий контейнер становится гибким, если установить для свойства display значение flex :

Пример

.flex-container {
дисплей: гибкий;
}

Попробуйте сами »

Свойства гибкого контейнера:

• flex-направление
• гибкая пленка
• гибкий поток
• выравнивание содержимого
• элементы выравнивания
• выравнивание содержимого

Свойство flex-direction

Свойство flex-direction определяет, в каком направлении контейнер хочет сложить гибкие элементы.

Пример

Столбец 9Значение 0015 размещает гибкие элементы вертикально (сверху вниз):

.flex-container {
дисплей: гибкий;
flex-направление: столбец;
}

Попробуй сам "

Пример

Значение column-reverse размещает гибкие элементы вертикально (но снизу вверх):

. flex-container {
дисплей: гибкий;
flex-direction: обратная колонка;
}

Попробуй сам "

Пример

Значение строки размещает гибкие элементы горизонтально (слева направо):

.flex-container {
дисплей: гибкий;
flex-направление: строка;
}

Попробуй сам "

Пример

Значение row-reverse укладывает flex-элементы горизонтально (но справа налево):

.flex-container {
дисплей: гибкий;
flex-направление: строка-реверс;
}

Попробуй сам "

Свойство flex-wrap

Свойство flex-wrap указывает, flex-элементы должны быть обернуты или нет.

Примеры ниже содержат 12 гибких элементов, чтобы лучше продемонстрировать свойство flex-wrap .

Пример

Значение wrap указывает, что flex-элементы будут переноситься при необходимости:

.flex-container {
дисплей: гибкий;
flex-wrap: обернуть;
}

Попробуй сам "

Пример

Значение nowrap указывает, что гибкие элементы не будут переноситься (это по умолчанию):

. flex-контейнер {
дисплей: гибкий;
гибкая обертка: nowrap;
}

Попробуй сам "

Пример

Значение wrap-reverse указывает, что гибкие элементы будут перенесены при необходимости в обратном порядке:

.flex-container {
дисплей: гибкий;
flex-wrap: обернуть-обратно;
}

Попробуй сам "

Свойство flex-flow

Свойство flex-flow является сокращенным свойством для установки как flex-направление и flex-wrap свойств.

Пример

.flex-контейнер {
дисплей: гибкий;
flex-flow: перенос строк;
}

Попробуй сам "

Свойство justify-content

Свойство justify-content используется для выровнять гибкие элементы:

Пример

Значение center выравнивает гибкие элементы по центру контейнера:

.flex-container {
дисплей: гибкий;
выравнивание содержимого: по центру;
}

Попробуй сам "

Пример

Значение flex-start выравнивает flex-элементы по началу контейнера (по умолчанию):

. flex-контейнер {
дисплей: гибкий;
выравнивание содержимого: flex-start;
}

Попробуй сам "

Пример

Значение flex-end выравнивает flex-элементы по концу контейнера:

.flex-container {
дисплей: гибкий;
выравнивание содержимого: flex-end;
}

Попробуй сам "

Пример

Значение space-around отображает гибкие элементы с пробелом перед, между, и после строк:

.flex-container {
дисплей: гибкий;
выравнивание содержимого: пространство вокруг;
}

Попробуй сам "

Пример

Значение space-between отображает гибкие элементы с пробелом между строки:

.flex-контейнер {
дисплей: гибкий;
выравнивание содержимого: пробел между;
}

Попробуй сам "

Свойство align-items

Свойство align-items используется для выравнивания гибкие элементы.

В этих примерах мы используем контейнер высотой 200 пикселей, чтобы лучше продемонстрировать свойство align-items .

Пример

Значение center выравнивает гибкие элементы по середине контейнер:

.flex-контейнер {
дисплей: гибкий;
 высота: 200 пикселей;
выравнивание элементов: по центру;
}

Попробуй сам "

Пример

Значение flex-start выравнивает flex-элементы по верхней части контейнера:

.flex-container {
дисплей: гибкий;
 высота: 200 пикселей;
выравнивание элементов: flex-start;
}

Попробуй сам "

Пример

Значение flex-end выравнивает гибкие элементы по нижней части контейнера:

.flex-container {
дисплей: гибкий;
 высота: 200 пикселей;
элементы выравнивания: flex-end;
}

Попробуй сам "

Пример

Значение stretch растягивает гибкие элементы, чтобы заполнить контейнер (по умолчанию):

. flex-контейнер {
дисплей: гибкий;
 высота: 200 пикселей;
выравнивание элементов: растянуть;
}

Попробуй сам "

Пример

Значение baseline выравнивает flex-элементы, такие как их baselines aligns:

.flex-container {
дисплей: гибкий;
 высота: 200 пикселей;
элементы выравнивания: базовый уровень;
}

Примечание: в примере используется другой размер шрифта, чтобы продемонстрировать, что элементы выравниваются по базовой линии текста:

Попробуй сам "

Свойство align-content

Свойство align-content используется для выравнивания гибких линий.

В этих примерах мы используем контейнер высотой 600 пикселей с размером . Для свойства flex-wrap установлено значение wrap , чтобы лучше продемонстрировать свойство align-content .

Пример

Значение space-between отображает гибкие линии с равным расстоянием между ними:

. flex-контейнер {
дисплей: гибкий;
 высота: 600 пикселей;
flex-wrap: обернуть;
выравнивание содержимого: пробел между;
}

Попробуй сам "

Пример

Значение space-around отображает гибкие линии с пробелом перед, между ними и после них:

.flex-container {
дисплей: гибкий;
 высота: 600 пикселей;
flex-wrap: обернуть;
выравнивание содержимого: пространство вокруг;
}

Попробуй сам "

Пример

Значение stretch растягивает гибкие линии, чтобы занять оставшиеся пробел (по умолчанию):

.flex-container {
дисплей: гибкий;
 высота: 600 пикселей;
flex-wrap: обернуть;
выравнивание содержимого: растянуть;
}

Попробуй сам "

Пример

На дисплее значений center отображаются гибкие линии в середине контейнера:

.flex-container {
дисплей: гибкий;
 высота: 600 пикселей;
flex-wrap: обернуть;
выровнять содержимое: по центру;
}

Попробуй сам "

Пример

Значение flex-start отображает гибкие линии в начале контейнера:

. flex-container {
дисплей: гибкий;
 высота: 600 пикселей;
flex-wrap: обернуть;
выравнивание содержимого: flex-start;
}

Попробуй сам "

Пример

Значение flex-end отображает гибкие линии в конце контейнера: 

.flex-контейнер {
дисплей: гибкий;
 высота: 600 пикселей;
flex-wrap: обернуть;
выравнивание содержимого: flex-end;
}

Попробуй сам "

Perfect Centering

В следующем примере мы решим очень распространенную проблему стиля: perfect центрирование.

РЕШЕНИЕ: Установите для свойств justify-content и align-items значение center , и элемент flex будет идеально центрирован:

Пример

.flex-container {
  display: flex;
 высота: 300 пикселей;
  по ширине: центр;
  align-items: center;
}


Попробуй сам "

Свойства контейнера CSS Flexbox

В следующей таблице перечислены все свойства контейнера CSS Flexbox:

Свойство	Описание
выравнивание содержимого	Изменяет поведение свойства flex-wrap. Он похож на align-items, но вместо выравнивания flex-элементов он выравнивает flex-линии
элементы выравнивания	Выравнивает гибкие элементы по вертикали, когда элементы не используют все доступное пространство на поперечной оси
дисплей	Указывает тип поля, используемого для элемента HTML
flex-направление	Указывает направление гибких элементов внутри гибкого контейнера
гибкий поток	Сокращенное свойство для flex-direction и flex-wrap
гибкая пленка	Указывает, должны ли flex-элементы переноситься или нет, если для них недостаточно места на одной flex-линии
выравнивание содержимого	Горизонтально выравнивает гибкие элементы, когда элементы не используют все доступное пространство на главной оси

❮ Предыдущий Далее ❯

 flex-направление:
  строка | ряд-обратный |
  колонка | column-reverse 

 гибкая пленка:
  сейчас | обернуть | обернуть обратно 

 выравнивание-контента:
  гибкий старт | гибкий конец | центр |
  пространство между | космос-около 

 align-items:
  растянуть | гибкий старт | гибкий конец |
  центр | baseline 

 align-content:
  растянуть | гибкий старт | гибкий конец |
  центр | пространство между | space-around