CSS - flex-direction Property

Quiz

CSS flex-direction property determines the direction in which flex items are placed within a flex container. Flex items can be arranged either in a horizontal row or a vertical column. The items must be flexible in order for the property to show its effect.

Syntax

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

Property Values

Value	Description
row	The flexible items are displayed in horizontal direction.
row-reverse	The flexible items are displayed in horizontal direction but in reverse direction.
column	The flexible items are displayed in vertical direction.
column-reverse	The flexible items are displayed in vertical direction but in reverse direction.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Flex Direction Property

The following examples explain the flex-direction property with different values.

Flex Direction Property with Row Value

To arrange the flex items in the horizontal direction (from left to right) in a container, we use the row value. This will stack the items starting from the left of the container and moving towards the right. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: row
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

Flex Direction Property with Row Reverse Value

To arrange the flex items in the horizontal direction (from right to left) in a container, we use the row-reverse value. This will stack the items starting from the right of the container and moving towards the left. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row-reverse;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: row-reverse
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

Flex Direction Property with Column Value

To arrange the flex items in the vertical direction (from top to bottom) in a container, we use the column value. This will stack the items starting from the top of the container and moving downwards. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: column;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: column
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

Flex Direction Property with Column Reverse Value

To arrange the flex items in the vertical direction (from bottom to top) in a container, we use the column-reverse value. This will stack the items starting from the bottom of the container and moving upwards. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: column-reverse;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: column-reverse
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex-direction	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page