Flexbox

Свойства для дочерних элементов (Flex элементов)

order

По умолчанию, все элементы располагаются в исходном для них порядке. Однако, свойство  управляет порядком, в котором располагаются элементы внутри контейнера.

flex-grow

Свойство определяет возможность элемента увеличиваться в размере, при необходимости. Оно принимает безразмерное значение в качестве пропорции, которое определяет какое количество свободного пространства внутри контейнера должен занимать элемент.

Если у всех элементов свойство  установлено в , то свободное пространство внутри контейнера будет равномерно распределено между всеми элементами. Если у одного из элементов значение установлено в , то элемент будет занимать в два раза больше пространства, чем остальные (по крайней мере, попытается).

Нельзя указывать отрицательные числа.

flex-shrink

Это свойство определяет возможность элемента уменьшаться в размере, при необходимости.

Нельзя указывать отрицательные числа.

flex-basis

Определяет размер элемента по умолчанию, до распределения оставшегося пространства. Это может быть длина (20%, 5rem и т.д.) или ключевое слово. Ключевое слово  означает «выглядеть как моё свойство  или «. Ключевое слово  означает что «размер основан на содержимом элемента» — это ключевое слово пока не очень хорошо поддерживается, поэтому его трудно проверить, а ещё труднее узнать что делают его братья ,  и .

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

flex

Это сокращение для ,  и . Второй и третий параметры ( и ) не обязательны. Значение по умолчанию установлено в .

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

align-self

Это свойство позволяет переопределить выравнивание по умолчанию (или заданное с помощью свойства ) для отдельных flex-элементов.

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

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

Примеры

Давайте начнём с самого простого примера, решающего задачу, которая возникает почти каждый день: идеальное центрирование. Не может быть ничего проще, если вы используете Flexbox.

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

Теперь давайте используем ещё несколько свойств. Рассмотрим список из 6 элементов, все с фиксированным размером в эстетическом отношении, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены вдоль горизонтальной оси и чтобы при изменении размера браузера всё было в порядке (без медиа-запросов!).

Готово! Всё остальное, это лишь некоторые проблемы дизайна. Ниже приведён пример на CodePen, обязательно зайдите туда и попробуйте изменить размер окон, чтобы посмотреть что произойдёт.

Давайте попробуем что-нибудь ещё. Представьте, что у нас есть навигация расположенная по правому краю в самой верхней части экрана, но мы хотим чтобы она располагалась по центру на экранах среднего размера и была в одну колонку на маленьких экранах. Проще простого.

Давайте попробуем сделать что-нибудь ещё лучше, играясь с гибкостью наших flex-элементов! Как насчёт трёхколоночного mobile-first макета с шапкой и футером на всю ширину экрана, и чтобы не было зависимости от исходного порядка элементов.

Свойства для Родителя (flex контейнер)

flex-direction

• row (по умолчанию): слева направо в ltr; справа налево в rtl
• row-reverse справа налево ltr; слева направо в rtl
• column: так же, как и row но сверху вниз
• column-reverse: то же самое, row-reverse но снизу вверх

flex-wrap

• nowrap (по умолчанию): все flex элементы будут в одной строке
• wrap: flex-элементы будут перенесены на несколько строк сверху вниз.
• wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх.

здесь

justify-content

flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.

flex-end: элементы сдвинуты ближе к концу flex направления.

start: элементы сдвинуты к началу writing-mode направления.

end: элементы сдвинуты в конце writing-mode направления.

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

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

center: элементы центрированы вдоль линии

space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки

space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них

Обратите внимание, что визуально пространства не равны, так как все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства напротив края контейнера, но две единицы пространства между следующим элементом, потому что у следующего элемента есть свой собственный интервал, который применяется.

space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.

space-betweenесть подробные графикиflex-startflex-endcentersafeunsafesafe

align-items

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

safeunsafeхотя это поддерживается не всеми браузерами

align-content

justify-contentПримечание

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

safeunsafe

Вместо заключения

Итак, мы выяснили, в каких случаях уместнее использовать Float, Flexbox и Grid, но возможно ли их смешение? Давайте разберемся.

Если вы начали, например, использовать , то конечно же писать там свойства, которые относятся к Grid неуместно. Это неправильно.

Однако, если в одной части страницы блок выполнен полностью из Flexbox, а далее вам потребуется в следующем блоке сделать картинку, которая будет обрамляться текстом, то будет правильным использовать float.

Пример:

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Когда не стоит использовать флексы?

Мы рассмотрели некоторые причины, по которым думаю, cтоит выбирать флексы вместо раскладки на гридах, поэтому можем посмотреть на некоторые случаи, когда флекс — не лучший вариант. Мы уже посмотрели на пример с флексом против грида, где элементы выровнены по горизонтали и вертикали в отличие от элементов, которые занимают место построчно. И это различие стоит учитывать в первую очередь.

Вот пример грида с двумерной раскладкой. Раскладка одновременно и в строках, и в колонках. Пример на флексах — это одномерная раскладка. Мы позволили перенос флекс-строк, но распределение места на строке ведётся построчно. Каждая строка естественно ведёт себя как новый флекс-контейнер по направлению главной оси.

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

Неважно, большой или маленький у вас компонент. Если запомните из этой статьи только одно, пусть это будет следующее: выкиньте из головы идею о том, что гриды предназначены только для основной раскладки страницы, а флексы — для компонентов

У вас может быть крошечный компонент, которому требуется двумерная раскладка, и структура главной страницы, которой лучше подойдёт одномерная раскладка.

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

Например, мы можем сделать нашу раскладку на флексах более похожей на гриды, ограничив гибкость элементов. Задайте свойство  и выставите размеры элементов в процентах, подобно тому, как мы поступали с размерами элементов в раскладке на флоатах. Если обнаружите, что поступаете так, предположу, что раскладка на гридах подойдёт вам лучше, ведь она и была создана для этого.

See the Pen Smashing Flexbox Series 4: wrapped flex items with percentage widths by rachelandrew (@rachelandrew) on CodePen.

Принимая во внимание всё вышесказанное, помните, что часто нет чёткого правильного или неправильного ответа. Иногда единственное, что можно сделать — это попробовать разные варианты и посмотреть, что лучше всего подходит этому компоненту

Помните, что также можно переключаться между методами раскладки, используя флексы на одной контрольной точке и гриды на другой.

Как начать верстать по Flexbox?

Для того, чтобы нам начать верстать по Flexbox необходимо разместить внутри документа флекс контейнер, в качестве контейнера может быть использован совершенно любой семантически осмысленный элемент. Внутри этого флекс контейнера размещаются необходимые нам элементы, при этом все дочерние элементы этого контейнера автоматически становятся флекс элементами.

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

<section> <!-- флекс контейнер -->
	<div></div> <!-- дочерний флекс элемент -->
	<div></div> <!-- дочерний флекс элемент -->
	<div> <!-- дочерний флекс элемент -->
		<p>Первый абзац</p> <!-- не является флекс элементом -->
		<p>Второй абзац</p> <!-- не является флекс элементом -->
		<p>Третий абзац</p> <!-- не является флекс элементом -->
	</div>
</section>

У вас может возникнуть логичный вопрос, а что требуется для того, чтобы сделать флекс контейнер? Для этого достаточно установить свойство display элемента в значение flex, или inline-flex:

section {
	display: flex; // элемент отображается как блочный флекс контейнер
}

Перейдем к рассмотрению наглядного примера:

<!DOCTYPE html>
<html>
<head>
	<title>Пример размещения флекс контейнера</title>
<style> 
section {
	display: flex; /* блочный флекс контейнер */
}
div {
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 3px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<section> <!-- флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div> <!-- дочерний флекс элемент -->
				<p>Первый абзац</p> <!-- не является флекс элементом -->
				<p>Второй абзац</p> <!-- не является флекс элементом -->
				<p>Третий абзац</p> <!-- не является флекс элементом -->
			</div>
		</section>
	</body>
</html>

В этом примере мы установили для элемента <section> значение свойство display элемента в значение flex, а это означает, что он стал блочным флекс контейнером, а все вложенные в него дочерние элементы <div> стали флекс элементами. Для этих элементов мы указали стили, определяющие цвет текста (color), заднего фона (background) и внешние отступы (margin).

У многих редакторов кода по умолчанию встроен, или доступен для скачивания удобный плагин для быстрой разметки Emmet, он позволяет сделать основную разметку этого примера следующим образом: section>div*3>lorem + Tab (значение lorem генерирует текст, который имеется на изображении ниже).

Обратите внимание, что не прилагая особых усилий мы получили размещение колонок нашего макета одинаковой высоты независимо от наполнения их содержимым и это замечательно. Элементы

не являются по умолчанию флекс элементами и расположены в потоке третьего элемента

как обычные блочные элементы

Если в этом есть необходимость, то чтобы сделать их флекс элементами, как вы можете догадаться, необходимо для их родителя установить, что он является блочным (flex), или строчным (inline-flex) флекс контейнером, но об этом в следующем примере.

Результат нашего примера:

Рис. 204 Пример размещения флекс контейнера.

Что такое Flexbox на самом деле?

Спецификация Flexbox описывает метод компоновки так:

Я думаю, что ключевая фраза здесь “распределение пространства и выравнивание контента”. Flexbox — это все о том, чтобы взять кучу элементов (которые имеют разные размеры) и поместить их в контейнер (который сам может быть переменного размера). Flexbox — это мягкость. Он пытается создать наилучший макет для наших элементов, давая большим элементам больше пространства, а меньшим элементам меньше пространства, тем самым сохраняя читаемость контента.

Если люди находят Flexbox сложным и загадочным, это часто потому, что они пытаются использовать Flexbox как grid-систему, пытаясь вернуть контроль над размером и распределением пространства. Когда вы это делаете, Flexbox может показаться странным и сложным, поскольку вы боретесь с тем, что и делает его Flexbox’ом, т.е. с присущей ему гибкостью.

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

Существуют также шаблоны, в которых вы хотите иметь строки с переносом, однако вам не нужна строгая сетка. Если мы возьмем оригинальный пример Grid против Flexbox, где мы используем в сетке синтаксис repeat auto-fill, а затем flex-контейнер с переносом строк, то сразу увидим разницу между этими двумя методами.

В примере Grid элементы сетки выстраиваются в строки и столбцы. Когда число столбцов трека изменяется (в зависимости от пространства), элементы всегда переходят в следующую доступную ячейку сетки. На самом деле, нет никакого способа запросить элемент сетки окружить трек, чтобы заполнить по auto-flow сценарию, если есть другие пустые ячейки.

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

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

Это очень яркий пример того, где мы хотели бы использовать Flexbox над Grid Layout. Если мы хотим, чтобы элементы были обернуты, но занимали пространство, в котором они нуждались, по строкам. Это очень отличается от сетки. Шаблоны, подобные этому, могут представлять собой набор тегов (один или два слова, которые вы хотите хорошо отображать в виде набора элементов), занимающих необходимое пространство, а не жестко вставленных в строгую сетку.

В настоящее время Flexbox также является лучшим способом выполнения вертикального и горизонтального центрирования элемента внутри контейнера.

В будущем (если будет поддержка браузерами свойств Box Alignment вне гибкого макета), мы можем сделать это, не добавляя display: flex в контейнер. На данный момент, однако, все, что вам нужно сделать, это дополнительная строка CSS, что не является проблемой.

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

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

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

Однако я думаю, что Flexbox будет лучшим в ситуации, когда потребуется добавлять дополнительные элементы, которые я не ожидала в своем дизайне. Например, если у меня есть компонент навигации, использующий Grid, я бы создала достаточно треков для всех элементов, так как я не хотела бы, чтобы создавалась новая строка, если бы у меня было “слишком много” элементов. С flexbox, достаточно длинным, я бы разрешил элементам быть гибкими с flex-basis 0 (или auto), тогда бы элементы сами пускали нового компаньона в строку, освобождая ему место.

Пример 5. Медиа-объекты на Флексбокс

Медиа-объекты повсюду: от твитов до постов в Фейсбуке.

Обычный пост в Твитере и Фейсбуке

Внимательно посмотрим на верстку

<div class="media">
 
  <img class="media-object" src="/pic.jpg">
 
  <div class="media-body">
 
    <h3 class="media-heading"> Header </h3>
 
    <p></p>
 
  </div>
 
</div>

Как вы догадались, .media станет нашим основным флекс-контейнером

.media {
 
   display: flex
 
}

По умолчанию flex-items контейнера растягивается по вертикали, чтобы занять всю доступную высоту. Убедимся, что .media-body заполняет все свободное пространство

.media-body {
 
   flex: 1
 
}

Раздел слева занимает все свободное пространство экрана. Тело медиа-объекта занимает оставшееся горизонтальное пространство внутри медиа-объекта (белого цвета)

Давайте зафиксируем тянущийся бокс

.media {
 
  ...
 
  align-items: flex-start
 
}

Флекс-элементы теперь выровнены по началу медиа-объекта. Размер изображения по умолчанию и никаких странных растяжений =)

Вот и все.

Перевернутый медиа-объект

У перевернутого медиа-объекта изображение располагается с другой стороны (справа), относительно тела объекта

Нет никакой необходимости вносить изменения в html-код, чтобы повернуть медиа-объект. Просто поменяем местами элементы flex-items вот так:

.media-object {
 
   order: 1
 
}

Теперь картинки будут располагаться после .media-body и media-heading

Вложенные медиа-объекты

Вы можете сделать вложенные медиа-объекты без изменения CSS-стилей, написанных ранее!

<div class="media">
 
  <img class="media-object" src="/pic.jpg">
 
  <div class="media-body">
 
    <h3 class="media-heading"> Header </h3>
 
    <p></p>
 
    <!--nested-->
 
    <div class="media">
 
    <img class="media-object" src="/pic.jpg">
 
    <div class="media-body">
 
        <h3 class="media-heading"> Header </h3>
 
        <p></p>
 
    </div>
 
    </div><!--end nested-->
 
  </div> 
 
</div>

Все работает!

Медиа-объект, вложенный в медиа-объект

Unicode медиа-объекты

Мы не обязаны ограничиваться только картинками. Без каких-либо изменений в ранее написанных CSS-стилях, вы можете вместо изображения вставить юникод.

<div class="media">
 
  <div class="media-object">&#x1F60E;</div>
 
  <div class="media-body">
 
    <h3 class="media-heading"> Header </h3>
 
    <p></p>
 
  </div>
 
</div>

Я поместил сюда смайлик

Медиа-объект с эмодзи-смайлом

Чтобы получить этот результат мы просто заменили img на div. А вотздесьвы можете подсмотреть юникоды некоторых смайликов-эмодзи.

Медиа-объект с HTML

А еще вы можете использовать html-объекты как в примере ниже

<div class="media">
 
  <div class="media-object">&phone;</div>
 
  <div class="media-body">
 
    <h3 class="media-heading"> Header </h3>
 
    <p></p>
 
  </div>
 
</div>

В качестве html-объекта в примере используется и на картинке вы можете видеть результат

&phone

Поэкспериментируйте с этими примерами на CodePen.

Attributes for the FlexboxLayout:

• flexDirection

  • This attribute determines the direction of the main axis (and the cross axis, perpendicular to the main axis). The direction children items are placed inside the Flexbox layout.
    Possible values are:

    • row (default)
    • row_reverse
    • column
    • column_reverse

• flexWrap

  • This attribute controls whether the flex container is single-line or multi-line, and the
    direction of the cross axis. Possible values are:

    • nowrap (default for FlexboxLayout)
    • wrap (default for FlexboxLayoutManager)
    • wrap_reverse (not supported by FlexboxLayoutManager)

• justifyContent

  • This attribute controls the alignment along the main axis. Possible values are:

    • flex_start (default)
    • flex_end
    • center
    • space_between
    • space_around
    • space_evenly

• alignItems

  • This attribute controls the alignment along the cross axis. Possible values are:

    • flex_start (default for FlexboxLayout)
    • flex_end
    • center
    • baseline
    • stretch (default for FlexboxLayoutManager)

• alignContent

  • This attribute controls the alignment of the flex lines in the flex container. Possible values
    are:

    • flex_start (default)
    • flex_end
    • center
    • space_between
    • space_around
    • stretch

• showDividerHorizontal (one or more of )

• dividerDrawableHorizontal (reference to a drawable)

  Puts horizontal dividers between flex lines (or flex items when flexDirection
  is set to column or column_rebase).

• showDividerVertical (one or more of )

• dividerDrawableVertical (reference to a drawable)

  Puts vertical dividers between flex items (or flex lines when flexDirection
  is set to column or column_rebase).

• showDivider (one or more of )

• dividerDrawable (reference to a drawable)

  Shorthand for setting both horizontal and vertical dividers. Note that if used with other attributes
  (such as justifyContent=»space_around» or alignContent=»space_between» … etc) for putting
  spaces between flex lines or flex items, you may see unexpected spaces. Please avoid using these
  at the same time.

  Example of putting both vertical and horizontal dividers.

  <shape xmlnsandroid="http://schemas.android.com/apk/res/android">
    <size
        androidwidth="8dp"
        androidheight="12dp" />
    <solid androidcolor="#44A444" />
  </shape> 

  <com.google.android.flexbox.FlexboxLayout xmlnsandroid="http://schemas.android.com/apk/res/android"
    xmlnsapp="http://schemas.android.com/apk/res-auto"
    androidlayout_width="match_parent"
    androidlayout_height="match_parent"
    appalignContent="flex_start"
    appalignItems="flex_start"
    appflexWrap="wrap"
    appshowDivider="beginning|middle"
    appdividerDrawable="@drawable/divider" >
  
    <TextView
        style="@style/FlexItem"
        androidlayout_width="220dp"
        androidlayout_height="80dp"
        androidtext="1" />
    <TextView
        style="@style/FlexItem"
        androidlayout_width="120dp"
        androidlayout_height="80dp"
        androidtext="2" />
    <TextView
        style="@style/FlexItem"
        androidlayout_width="160dp"
        androidlayout_height="80dp"
        androidtext="3" />
    <TextView
        style="@style/FlexItem"
        androidlayout_width="80dp"
        androidlayout_height="80dp"
        androidtext="4" />
    <TextView
        style="@style/FlexItem"
        androidlayout_width="100dp"
        androidlayout_height="80dp"
        androidtext="5" />

Float

Float — это свойство, которое позволяет определить по какой стороне будет выравниваться элемент. При этом остальные элементы будут обтекать объект со свойством Float с других его сторон. Используя float у вас есть возможность выбрать две стороны выравнивания — с правой стороны (right), либо с левой (left). Чтобы отменить позиционирование, для этого достаточно прописать

Уместнее всего использовать float для обтекания картинки текстом. Однако, не так давно было принято верстать практически все на флоатах. Те, кто верстает уже более 3-х лет, наверняка, помнят, довольно распространенный метод верстки меню. Чтобы установить пункты меню в линию, каждому li присваивался float left или right для того, чтобы они шли друг за другом.

Пример:

В чем минус использования Float?

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

Давайте рассмотрим на примере.

Здесь мы видим блоки, которые следуют друг за другом. Но у нас стоит задача: последний блок должен начинаться со следующей строчки. Чтобы это условие выполнялось, необходимо добавить блок с классом clear и стиль

Свойства для родительского элемента (Flex-контейнера)

display

Определяет flex-контейнер; строковый или блочный зависит от переданного значения. Включает flex-контекст для всех своих прямых, дочерних элементов.

Обратите внимание, что CSS колонки не влияют на flex-контейнер

flex-direction

Устанавливает основную ось, таким образом определяет направление элементов расположенных в контейнере. Flexbox (помимо опциональной обёртки) представляет собой концепцию однонаправленного макета. Думайте о flex-элементах, прежде всего как горизонтальных строках или вертикальных колонках.

• row (по умолчанию) —  слева направо в ; справа налево в ;
• row-reverse — справа налево в  ; слева направо в  ;
• column — тоже самое что , только сверху вниз;
• column-reverse — тоже самое что , только снизу вверх;

flex-wrap

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

• nowrap (по умолчанию) — все flex-элементы будут расположены на одной строке;
• wrap — flex-элементы будут расположены на нескольких строках, сверху вниз;
• wrap-reverse — flex-элементы будут расположены на нескольких строках, снизу вверх;

justify-content

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

flex-start (по умолчанию) — элементы прижимаются к началу строки;

flex-end — элементы прижимаются к концу строки;

center — элементы располагаются по центру вдоль строки;

space-between — элементы размещаются равномерно на линии; первый элемент находится в начале строки, последний элемент находится в конце строки;

space-around — элементы размещаются равномерно на линии с одинаковым пространством возле них

Обратите внимание, что визуально пространство не одинаковое, так как у всех элементов одинаковое пространство с обеих сторон. У первого элемента будет одна единица пространства со стороны контейнера, но две единицы между ним и следующим элементом, потому что у следующего элемента также по одной единице с двух сторон.

align-items

Это свойство определяет поведение flex-элементов вдоль поперечной оси на текущей строке. Думайте о нём как о , только для поперечной оси (перпендикулярной основной оси).

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

align-content

Примечание. Это свойство не действует, когда есть только одна строка flex-элементов.

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

Горизонтальное выравнивание

CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси флекс контейнера (горизонтально).

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех флекс элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.

Схематичное отображение работы свойства justify-content отображено на следующем изображении:

Рис. 211 Схематичное отображение работы свойства justify-content

Перейдем к рассмотрению следующего примера:

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства justify-content</title>
<style> 
.container,
.container2,
.container3,
.container4,
.container5 {   
	display: flex; /* блочные флекс контейнеры */
}
.container {       
	justify-content: flex-start; /* флекс элементы позиционируются в начале контейнера */
}
.container2 {       
	justify-content: flex-end; /* флекс элементы позиционируются в конце контейнера */
}
.container3 {       
	justify-content: center; /* флекс элементы позиционируются в центре контейнера */
}
.container4 {       
	justify-content: space-between; /* флекс элементы равномерно распределяются по всей строке (первый и последний прижаты по бокам) */
}
.container5 {       
	justify-content: space-around; /* флекс элементы равномерно распределяются по всей строке */
}
div > div {
	width: 50px; /* ширина элемента */
	height: 50px; /* высота элемента */
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 1px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<h3>justify-content: flex-start;</h3>
		<div class = "container"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: flex-end;</h3>
		<div class = "container2"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: center;</h3>
		<div class = "container3"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: space-between;</h3>
		<div class = "container4"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
		<h3>justify-content: space-around;</h3>
		<div class = "container5"> <!-- блочный флекс контейнер -->
			<div>A</div> <!-- дочерний флекс элемент -->
			<div>B</div> <!-- дочерний флекс элемент -->
			<div>C</div> <!-- дочерний флекс элемент -->
		</div>
	</body>
</html>

В этом примере мы разместили пять блочных флекс контейнеров, внутри них мы разместили по три элемента <div>, которым задали ширину и высоту равную 50 пикселей.

Первый контейнер имеет значение flex-start свойства justify-content, это значение определяет, что флекс элементы позиционируются в начале контейнера. Это значение по умолчанию и указано лишь для демонстрационной цели.

Второй контейнер имеет значение flex-end свойства justify-content, это значение определяет, что флекс элементы позиционируются в конце контейнера.

Третий контейнер имеет значение center свойства justify-content, это значение определяет, что флекс элементы позиционируются в центре контейнера.

Четвертый контейнер имеет значение space-between свойства justify-content, это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом первый флекс элемент позиционируются в начале контейнера, а последний флекс элемент позиционируется в конце контейнера.

Пятый контейнер имеет значение space-around свойства justify-content, это значение определяет, что флекс элементы равномерно распределяются по всей строке, при этом пустое пространство между первым и после последнего флекс элемента равно половине между соседними элементами в контейнере.

Результат нашего примера:

Рис. 212 Пример использования свойства justify-content.

В настоящее время добавлена поддержка значения space-evenly свойства justify-content, которое позволяет разместить четный промежуток между каждым элементом, включая начальний и дальний конец контейнера: