The flex-direction property

The flex-direction property is a part of the Flexible Box Layout module.

The property defines the main axis of a flex container and sets the order in which flex items appear.

Flex items can be displayed:

  • horizontally along the row from left to right (flex-direction:row) or right to left (flex-direction:row-reverse)
  • vertically from top to bottom (flex-direction:column) or from bottom to top (flex-direction)

Syntax

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      #color-container  {
      width: 400px;
      height: 400px;
      border: 1px solid #c3c3c3;
      display: flex;
      flex-direction: column-reverse; 
      /*Change the value (row, row-reverse or column) to see how the items are aligned. */
      }
      #color-container  div {
      width: 70px;
      height: 70px;
      }
    </style>
  </head>
  <body>
    <div id="color-container">
      <div style="background-color:#8ebf42;">A</div>
      <div style="background-color:#1c87c9;">B</div>
      <div style="background-color:#d5dce8;">C</div>
      <div style="background-color:#90ee90;">F</div>
    </div>
  </body>
</html>

In this example we set flex-direction:column-reverse; to align the items vertically from bottom to top. Change values of the flex-direction property (row, row-reverse or column) to see how the appearance of the items change.

Note, that some browsers do not support flex-direction, use prefixes listed below.

-webkit- /* Old - iOS 6-, Safari 3.1-6 */
-moz-    /* Old - Firefox 19- (buggy but mostly works) */
-ms- /* Tweener - IE 10 */
-webkit-   /* New- Chrome */

Property Values

The flex-direction property has the following values:

Value Descriptions
row -(default value) items are displayed horizontally as a row.
row-reverse -items are displayed in a row in a reverse order (from right to left).
column -items are displayed vertically from top to bottom.
column-reverse -items are displayed vertically from bottom to top.
initial -the property uses its default value.
inherit -the property inherits value from its parents element.

Related properties: align-content, align-items, align-self, display, flex-direction, flex-basis, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.