Выравнивание элементов во flex контейнере

Выравнивание вдоль поперечной оси

Время перейти на следующий уровень. Вы можете использовать три свойства CSS для выравнивания элементов вдоль поперечной оси. Два из них ( и ) предназначены для однострочного выравнивания, а  для выравнивания по многострочной линии.

Однострочное выравнивание

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

Оба могут принимать следующие значения:

1. — заставляет свойство align-self наследовать значение align-items (по умолчанию для align-self)
2. — flex элементы выровнены от начала поперечной оси
3. — flex элементы выровнены от конца поперечной оси
4. — flex элементы выровнены по центру поперечной оси
5. — flex элементы выровнены от их вверх
6.   — flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (по умолчанию для align-items)

Codepen ниже показывает, как свойства и ведут себя когда, flex-direction установлено как . Поперечная ось по умолчанию проходит сверху вниз. Элементы имеют разные внутренние отступы (padding), чтобы изменить их высоты и базовые линии. Например, вы можете увидеть, что значение выравнивает элементы от начала поперечной оси, тогда как выравнивает их от конца.

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

Многострочное выравнивание

Свойство делает возможным многострочное выравнивание вдоль поперечной оси. Оно определяет, как строки flex элементов отступают друг от друга. Свойство align-content не влияет на контейнер с одной строкой flex (например, когда содержимое не переносится). Оно может принимать шесть различных значений:

1. — flex элементы выровнены от начала поперечной линии
2. — flex элементы выровнены от конца поперечной оси
3. — flex элементы выровнены по центру поперечной оси
4. — flex элементы распределены равномерно вдоль поперечной оси между flex-start и flex-end
5. — flex элементы распределены равномерно вдоль поперечной оси, но отступы половинного размера добавляются с каждого конца
6. — flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (это значение по умолчанию)

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

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

Если вы поняли все, что мы до этого прошли, то вы очень хорошо потрудились. Теперь у вас есть хорошее базовое понимание flexbox выравнивания.

Достижимый идеал

Теперь у нас есть механизм специально для раскладки макетов — Flexbox. С его помощью задача решается буквально двумя строчками кода:

.menu {
    display: flex;
    justify-content: space-between;
}

Всё! В этих строчках — полное решение нашей задачи. Первая строчка превращает обычный контейнер в «волшебный» флекс-контейнер, а вторая включает равномерное распределение свободного пространства между пунктами, независимо от их ширины. Остальные свойства — фон, шрифт, отступы и т.п. — нужны буквально лишь для красоты.

Это решение работает сходу в Chrome 21+, Firefox 22+, Опере 12.1 (Presto) и 17+ (Blink), IE11+, а также актуальных мобильных версиях этих браузеров. Это более 60% по данным на момент написания статьи

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

Чем не изящная деградация?

Увеличение относительной ширины флекс элемента

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

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

Обращаю Ваше внимание на то, что отрицательные значения свойства flex-grow не допускаются. Значение по умолчанию 0 — элементы не будут увеличиваться

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

<!DOCTYPE html>
<html>
<head>
	<title>Использование свойства flex-grow</title>
<style> 
.container,
.container2,
.container3 {
	display: flex;  /* элементы отображаются как блочные флекс контейнеры */
	height: 100px;  /* устанавливаем высоту для контейнеров */
}
div > div {
	color: #fff;  /* цвет текста */
	margin: 5px;  /* внешние отступы со всех сторон */
	background: rgb(0,150,208);  /* цвет заднего фона */
	font-size: 20px;  /* размер шрифта */
	text-align: center; /* горизонтальное выравнивание текста по центру */
} 
.container div:nth-of-type(1),
.container div:nth-of-type(3),
.container2 div:nth-of-type(1),
.container2 div:nth-of-type(3),
.container3 div:nth-of-type(1),
.container3 div:nth-of-type(3) {
	flex-grow: 1;  /* блок будет увеличен на 1 по отношению к остальным флекс элементам */
} 
.container div:nth-of-type(2) {
	flex-grow: 2;  /* блок будет увеличен на 2 по отношению к остальным флекс элементам */
} 
.container2 div:nth-of-type(2) {
	flex-grow: 3;  /* блок будет увеличен на 3 по отношению к остальным флекс элементам */
} 
.container3 div:nth-of-type(2) {
	flex-grow: 4;  /* блок будет увеличен на 4 по отношению к остальным флекс элементам */
} 
</style>
</head>
	<body>
		<div class = "container">
			<div>1</div>
			<div>2</div>
			<div>1</div>
		</div>
		<div class = "container2">
			<div>1</div>
			<div>3</div>
			<div>1</div>
		</div>
		<div class = "container3">
			<div>1</div>
			<div>4</div>
			<div>1</div>
		</div>
	</body>
</html>

В этом примере мы разместили три блочных флекс контейнера, внутри них мы разместили по три элемента <div>. С использованием псевдокласса :nth-of-type() указали для каждого первого и третьего элемента в каждом контейнере, что блок будет увеличен на 1 по отношению к остальным флекс элементам. Для каждого второго элемента в контейнерах указали различные значения свойства flex-grow.

В первом контейнере второй элемент будет увеличен на 2 по отношению к остальным флекс элементам, во втором контейнере на 3, а в третьем уже на четыре

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

Результат примера:

Рис. 223 Пример использования свойства flex-grow

CSS Grid Vs. Flexbox

CSS Grid и Flexbox – это модели макета, которые имеют схожие черты и могут использоваться вместе. Ключевое отличие состоит в том, что CSS Grid можно использовать для создания двумерных макетов, а Flexbox можно использовать только для создания одномерных макетов. Это означает, что вы можете размещать компоненты по осям X и Y в CSS Grid и только по одной оси в Flexbox.

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

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

Ниже приведена полезная иллюстрация от разработчика Аюш Гупта макета, который возможен с помощью CSS Grid.

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

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

В статье о CSS Tricks основатель Крис Койер сделал важное замечание. Как и Flexbox, CSS Grid можно использовать для создания одномерных макетов (что часто бывает)

Flexbox также можно использовать для создания двухмерных макетов. Поэтому было бы неверно сказать, что основное отличие состоит в том, что CSS Grid предназначен исключительно для двумерных макетов, а Flexbox – для одного. Просто CSS Grid позволяет создавать 2D-макеты так, как это не делает Flexbox.

С помощью Flexbox вы можете создавать многострочные гибкие контейнеры. Вам просто нужно применить свойство flex-wrap со значением «wrap» к вашему контейнеру. Таким образом, если ваши элементы слишком велики для отображения в одной строке в определенном окне просмотра, они будут переноситься на другую строку, а не сжиматься, чтобы поместиться в одну строку.

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

Вот параллельное сравнение макета, созданного с помощью Flexbox, и макета, созданного с помощью CSS Grid, которое демонстрирует этот эффект.

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

Обратите внимание, однако, что вы не можете использовать контейнер CSS Grid внутри контейнера Flexbox

Свойство оrder для Flexbox

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

1. (по умолчанию) главной оси: слева направо
2. главной оси: справа налево
3. главной оси : сверху вниз
4. главной оси: снизу вверх

определяет, расположены ли flex-элементы в один ряд или в несколько. Он также контролирует направление поперечной оси. Может иметь три значения:

1. (по умолчанию) размещает flex-элементы в одну строку; поперечная ось стоит в положении по умолчанию
2. размещает  flex-элементы в несколько строк; поперечная ось стоит в положении по умолчанию
3. размещает  flex-элементы в несколько строк; поперечная ось в обратном порядке

Положение поперечной оси по умолчанию:

• сверху вниз в случае и
• слева направо в случае и

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

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

Пример шорткода

Мы используем простой код, чтобы увидеть, как работает flexbox расстановка элементов. В данном примере HTML состоит из нескольких элементов:

Элемент  div будет flex-контейнером, а div с классом будут flex-элементами. Мы будем использовать (почти) один и тот же CSS код во всех примерах, только поменяются свойства и . Вот как выглядит наш CSS со значениями и :

Тот же пример в демонстрации на CodePen: 

Расстановка элементов с помощью и  

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

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

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

Когда это , элементы располагаются вертикально сверху вниз. И когда мы используем вместо , flexbox начинает размещать элементы справа (теперь это начальная точка поперечной оси), а не слева.

Расстановка элементов с помощью   и  

Теперь давайте посмотрим на то, как flexbox размещает элементы, когда flex-direction — это и .

Как видно из демонстрации выше, в обоих случаях flexbox начинает выкладывать элементы, как и раньше, с начала по главной оси. Главная ось проходит справа налево, поэтому flexbox начинает раскладывать элементы справа.  Кроме того, главная ось макета проходит снизу вверх, поэтому элементы начинают размещаться снизу вверх flex контейнера.

Когда мы используем , flexbox начинает размещать элементы со свойством : сверху , и слева  , так как они соответсвенно являются начальными точками поперечной оси.  

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

Ускорьте процесс с помощью  

Также значения  и могут применяться к одному классному CSS свойству. Оно называется flex-flow. Чтобы его использовать, нам нужно прописать эти два значения вместе, как это сделано ниже:

Перестановка элементов в Flexbox

Пришло время взглянуть на вещи немного по-другому.

Свойство order изменяет порядок по умолчанию для flex-элементов, который мы определяем с помощью и . Он влияет только на визуальное расположение элементов, но он не влияет на то, как скринридеры и другие пользовательские агенты, не относящиеся к CSS, читают исходный код.

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

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

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

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

Выравнивание содержимого по главной оси

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

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

Свойство  может принимать те же самые значения, что и .

• (не определено в спецификации Flexbox)

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

Если свойство  имеет значение , то свойство  распределит доступное пространство в контейнере между элементами.

Необходимо помнить, что при использовании свойств  и элементы позиционируются в режиме записи. Если свойству  задано значение  и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

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

justify-content

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

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

Применяется к: flex контейнерам.

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

flex-start

Флексы прижаты к началу строки.

flex-end

Флексы прижаты к концу строки.

center

Флексы выравниваются по центру строки.

space-between

Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.

space-around

Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

space-evenly

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

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start

Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.

flex-end

Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.

center

Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)

space-between

Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same.

space-around

Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.

space-evenly

Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

Свойства контейнера flexbox

Свойство display позволяет определить div в качестве контейнера:

.container
{
  display: flex;
}

Flex-direction

CSS flex direction позволяет определить направление, в котором дочерние элементы будут распространяться (четыре значения):

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

• row — слева направо;
• row-reverse — справа налево;
• column — сверху вниз;
• column-reverse — снизу вверх.

Пример слева направо

Пример справа налево

Пример сверху вниз

Пример снизу вверх

flex-wrap

По умолчанию flexbox располагает дочерние элементы в одну строку. Но, изменив значение flex-wrap, можно разрешить их перенос на новую строку:

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

• nowrap — одна строка, слева направо;
• wrap — несколько строк, слева направо;
• wrap-reverse — несколько строк, справа налево.

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

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

flex-flow

Flex-flow позволяет объединить два описанных выше свойства в одно. Это сокращенное свойство, определяющее flex-direction и flex-wrap:

.container
{
  display: flex;
  flex-flow: row nowrap;
}

justify-content

Определяет, как размещаются внутри div контейнера дочерние элементы. Доступно пять различных значений этого свойства CSS flex:

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

Пример flex-start

Пример flex-end

Пример center

Пример space-between

Пример space-around

align-items

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

• flex-start — выравнивает элементы по верху;
• flex-end — выравнивает элементы по низу;
• center — центрирует элементы по вертикали;
• baseline — выравнивает элементы по базовому уровню;
• stretch — растягивает элементы, чтобы они соответствовали размерам контейнера.

Пример flex-start

Пример flex-end

Пример center

Пример baseline

Пример stretch

align-content

Выравнивает контент и пространство между полями, когда контент перемещается на несколько строк. Доступно шесть значений этого свойства CSS flex 1:

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

Старые методы выравнивания

У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя , центральные блоки, используя auto s, а в макетах таблицы или встроенного блока, используя свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.

Если вы изначально узнали Flexbox, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.

Использование авто отступов для выравнивания по главной оси

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

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

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

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение для . Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает . Оба свойства со значениями отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

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