CSS - flex-direction

Description

The flex-direction property determine 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.

Possible Values

row
row-reverse
column
column-reverse

Applies to

All the HTML elements.

DOM Syntax

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

Flex Direction Row

If the property flex-direction is set to the value row, it arranges flex items horizontally, from left to right.

Let us see an example −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-direction: row;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

Flex Direction Row Reverse

Flexbox offers the flex-direction: row-reverse property, which arranges flex items in a horizontal row but in a reversed order.

Let us see an example −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-direction: row-reverse;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

Flex Direction Column

You can arrange flex items in a vertical column, from top to bottom, by setting the flex-direction property to the value column.

Let us see an example −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-direction: column;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

Flex Direction Column Reverse

Flex items are aligned vertically in a column layout, but their order is reversed, from bottom to top - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-direction: column-reverse;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>