The flex-direction property

The flex-direction property sets a direction of the main and cross axis or, in other words, arranges elements in a row or column.

It applies to the parent element for flex blocks. It is included in the shorthand flex-flow property.

Syntax

cssselector {
  flex-direction: row | row-reverse | column | column-reverse;
}

Values

Default value: row.

Example

Elements are arranged in a row, by default pressed to the left edge, their numbering is in the usual order - from left to right:

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;
}

Результат:

Example . The row-reverse value

Elements are arranged in a row, by default pressed to the right edge, their numbering is in reverse order - from right to left:

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;
}

Результат:

Example . The column value

The elements are arranged in a column, pressed to the top by default, their numbering is in the usual order - top to bottom:

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;
}

Результат:

Example . The column-reverse value

The elements are arranged in a column, pressed to the bottom by default, their numbering is in reverse order - bottom to top:

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;
}

Результат:

See also