Свойство flex-direction

Свойството flex-direction задава посоката на главната и напречната ос или, с други думи, подрежда елементите в ред или колона.

Прилага се към родителския елемент за flex блокове. Влиза в свойството-съкращение flex-flow.

Синтаксис

cssселектор {
  flex-direction: row | row-reverse | column | column-reverse;
}

Стойности

Стойност по подразбиране: row.

Пример

Елементите са подредени в ред, по подразбиране притиснати към левия край, номерацията им има обикновен ред - отляво надясно:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Пример . Стойност row-reverse

Елементите са подредени в ред, по подразбиране притиснати към десния край, номерацията им има обратен ред - отдясно наляво:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Пример . Стойност column

Елементите са подредени в колона, по подразбиране притиснати към върха, номерацията им има обикновен ред - отгоре надолу:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Пример . Стойност column-reverse

Елементите са подредени в колона, по подразбиране притиснати към дъното, номерацията им има обратен ред - отдолу нагоре:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Вижте също