Primer CSS Flexbox Flex Direction

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.

Output:

👁 Image

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

Output:

👁 Image

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