Primer CSS Flexbox Flex Direction
Last Updated :
23 Jul, 2025
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/[email protected]/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/[email protected]/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/product/css-utilities/#flex-direction
Similar Reads
Primer CSS Flexbox Flex 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 classes are u
3 min read
CSS flex-direction Property The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main axis of the flexible items. The main axis can be horizontal or vertical, depending on the value of the flex-direction property.Note: The flex-direction property only works on flexible items. With
5 min read
Primer CSS Flexbox Flex Container 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 Container is
2 min read
Primer CSS Flexbox Primer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.Primer CSS Flexbox:Flex container: Flex Container is used to make
6 min read
Tailwind CSS Flex Direction The CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-direction Property for fast development of front-end.Note: To activate the flex-direction you h
3 min read
Primer CSS Flexbox Bugs 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. Flexbox is the flexible box that will
3 min read