CSS Flexbox - flex-direction Property

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.

Possible Values

  • row − The main-axis of the flex container follows the direction of the text. The main-start and main-end points align with the direction of the content.

  • row-reverse − Same as row value, but the main-start and main-end points along the main axis are reversed compared to the content direction.

  • column − The main axis of the flex container is the same as the block axis. The main-start and main-end points correspond to before and after points in the writing mode.

  • column-reverse − Same as column but the main-start and main-end points are in the reversed direction of the content flow.

Applies to

Flex containers

Syntax

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

CSS flex-direction - row Value

The following example demonstrates that flex-direction: row property arranges flex items in horizontal direction, from left to right.

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

CSS flex-direction - row-reverse Value

The following example demonstrates that flex-direction: row-reverse property arranges flex items in horizontal direction but in a reversed order, from right to left −

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

CSS flex-direction - column Value

The following example demonstrates that flex-direction: column property arranges flex items in vertical direction, from top to bottom −

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

CSS flex-direction - column-reverse Value

The following example demonstrates that flex-direction: column-reverse property arranges flex items in vertical direction but in a reversed order, from bottom to top −

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