flex-direction

Основное Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.

Свойство flex-direction CSS определяет, как элементы flex размещаются в контейнере flex, задавая основную ось и направление (нормальное или обратное).

Попробуйте

Обратите внимание, что значения row и row-reverse зависят от направления контейнера flex. Если его атрибут dir равен ltr, то row представляет собой горизонтальную ось, ориентированную слева направо, а row-reverse — справа налево; если атрибут dir равен rtl, то row представляет собой ось, ориентированную справа налево, а row-reverse — слева направо.

Синтаксис

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

Значения

Принимаются следующие значения:

row: Основная ось контейнера flex определяется так же, как и направление текста. Точки main-start и main-end совпадают с направлением содержимого.
row-reverse: Ведёт себя так же, как row , но точки main-start и main-end противоположны направлению содержимого.
column: Основная ось контейнера flex совпадает с осью блоков. Точки main-start и main-end совпадают с точками перед и после режима написания.
column-reverse: Ведёт себя так же, как column , но точки main-start и main-end противоположны направлению содержимого.

Доступность

Использование свойства flex-direction со значениями row-reverse или column-reverse создаст разрыв между визуальным представлением содержимого и порядком в DOM. Это негативно повлияет на пользователей с нарушением зрения, которые пользуются средствами вспомогательной технологии, такими как экранный диктор. Если важен визуальный (CSS) порядок, то пользователи экранных дикторов не получат доступа к правильному порядку чтения.

Формальное определение

Начальное значение	`row`
Применимо к	контейнерам flex
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

flex-direction = 
  row             |
  row-reverse     |
  column          |
  column-reverse

Примеры

Обращение столбцов и строк контейнера flex

HTML

<h4>This is a Column-Reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>

CSS

.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}

Результат

Спецификации

Спецификация
CSS Flexible Box Layout Module Level 1 # flex-direction-property

Совместимость с браузерами

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`flex-direction`	2921	1212	20 Поддержка многострочного flexbox с Firefox 28. 49	12.115	97	2925	20 Поддержка многострочного flexbox с Firefox 28. 49	12.114	97	2.01.5	4.44.4
`column`	21	12	≤72	15	7	25	79	14	7	1.5	4.4
`column-reverse`	21	12	81 ≤72 В Firefox 81 и ранее поддержка переполнения с `column-reverse` была недоступна. См. баг 1042151.	15	7	25	81 79 В Firefox 81 и ранее поддержка переполнения с `column-reverse` была недоступна. См. баг 1042151.	14	7	1.5	4.4
`row`	21	12	≤72	15	7	25	79	14	7	1.5	4.4
`row-reverse`	21	12	81 ≤72 В Firefox 81 и ранее поддержка переполнения с `column-reverse` была недоступна. См. баг 1042151.	15	7	25	81 79 В Firefox 81 и ранее поддержка переполнения с `column-reverse` была недоступна. См. баг 1042151.	14	7	1.5	4.4

См. также

Свойство-сокращение CSS flex-flow для свойств CSS flex-direction и flex-wrap.
Основные понятия flexbox
Порядок элементов flex

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction