flex-direction

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

/* 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: unset;

<div class="grid">
  <div class="col">
    <div class="row">
      <div class="cell">
        row
        <div class="container row">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
      <div class="cell">
        row-reverse
        <div class="container row-reverse">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        column
        <div class="container column">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
      <div class="cell">
        column-reverse
        <div class="container column-reverse">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
  background: #EEE;
}

.grid {
  width: 100%;
  min-height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1 auto;
}

.container {
  background: #E4F0F5;
  padding: .5rem;
  margin: 0 auto;
  font-size: 1rem;
  display:flex;
  width: 11rem;
  height: 11rem;
}

.container span {
  display: block;
  padding: 1em;
  margin: .25em;
  border: 1px solid black;
  background: #CCC;
  flex: 1;
}

.row            { flex-direction: row; }
.row-reverse    { flex-direction: row-reverse; }
.column         { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }

Note that the value row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

See Using CSS flexible boxes for more properties and information.

Syntax

Values

The following values are accepted:

row

The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.

row-reverse

Behaves the same as row but the main-start and main-end points are permuted.

column

The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.

column-reverse

Behaves the same as column but the main-start and main-end are permuted.

Formal syntax

row | row-reverse | column | column-reverse

Example

HTML

<h4>This is a Column-Reverse</h4>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
    <div class="box1" style="background-color:red;">A</div>
    <div class="box1" style="background-color:lightblue;">B</div>
    <div class="box1" style="background-color:yellow;">C</div>
</div>

CSS

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

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

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

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

Result

Specifications

Browser compatibility

[1] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

[2] Multi-line flexbox is supported since Firefox 28.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See also

• Using CSS flexible boxes