Skip to content
Related Articles

Related Articles

Primer CSS Flexbox Flex Direction

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other.

Primer CSS Flexbox flex-direction is used to set the direction of the flex items in the flexbox. The direction will define in two ways column or row and these can be reversed as well. There are a few classes that can be used to set the direction of flex items which are mentioned and described below.

Primer CSS Flexbox Flex Directions Classes:

  • flex-column: This class is used to set the flex items top to bottom direction.
  • flex-column-reverse: This class is used to set the flex items bottom to top direction.
  • flex-row: This class is used to set the flex items left to the right direction.
  • flex-row-reverse: This class is used to set the flex items right to left direction.

Syntax:

<div class="border d-flex flex-row">
     ...
</div>

Example 1: Below is examples illustrating the Primer CSS Flexbox Flex Direction using the flex-column and flex-column-reverse classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Flex Container</title>
  
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
    
<body>
    <h1 class="color-fg-success text-center"
        GeeksforGeeks 
    </h1>
  
    <h4 class="text-center font-bold">
        Primer CSS Flex Direction
    </h4>
    <strong>Flexbox Container flex-column Class:</strong>
    <br>
    <div class="border d-flex flex-column m-2 color-bg-accent">
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-accent-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-success-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-danger-emphasis">
      </div>
    </div>
    <strong>Flexbox Container flex-column-reverse Class:</strong>
    <br>
    <div class="border d-flex flex-column-reverse m-2 color-bg-accent">
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-accent-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-success-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-danger-emphasis">
      </div>
    </div>
</body>
  
</html>

Output:

 

Example 2: The following code demonstrates the flex-row and flex-row-reverse classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Flex Container</title>
  
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
    
<body>
    <h1 class="color-fg-success text-center"
        GeeksforGeeks 
    </h1>
  
    <h4 class="text-center font-bold">
        Primer CSS Flex Direction
    </h4>
    <strong>Flexbox Container flex-row Class:</strong>
    <br>
    <div class="border d-flex flex-row m-2 color-bg-accent">
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-accent-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-success-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-danger-emphasis">
      </div>
    </div>
    <strong>Flexbox Container flex-row-reverse Class:</strong>
    <br>
    <div class="border d-flex flex-row-reverse m-2 color-bg-accent">
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-accent-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-success-emphasis">
            
      </div>
      <div class="m-2 p-5 border color-border-success-emphasis
                  color-bg-danger-emphasis">
      </div>
    </div>
</body>
  
</html>

Output:

 

Reference: https://primer.style/css/utilities/flexbox#flex-direction


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!