CSS flex-direction

The CSS flex-direction property is used to define the direction of items in flex container. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; flex-direction: initial; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

CSS flex-direction Syntax

The syntax of flex-direction property in CSS, is:

flex-direction: x;

The value of x should be any of the following:

  • row - used to place items horizontally, from left to right. This is the default value
  • column - used to place items vertically, from top to bottom
  • row-reverse - used to place items horizontally, from right to left
  • column-reverse - used to place items vertically, from bottom to top
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS flex-direction: row Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; flex-direction: row; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

CSS flex-direction: column Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; flex-direction: column; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

CSS flex-direction: row-reverse Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; flex-direction: row-reverse; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

CSS flex-direction: column-reverse Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; flex-direction: column-reverse; background-color: brown;}
      .container > div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

CSS Online Test


« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook




Subscribe Us on YouTube