Primer CSS Flexbox Flex Direction Last Updated : 24 Apr, 2022 Comments Improve Suggest changes Like Article Like Report 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 Comment More infoAdvertise with us Next Article Primer CSS Flexbox Flex Direction S skyridetim Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities 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 Directional Margins 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. It is highly reusable and flexible. It is created with GitHub’s design system. Margins are required to set each tag position. Prime 2 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 Primer CSS Flexbox Order 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 Order classes are 3 min read Primer CSS Flexbox Example Components 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. Its approach to CSS is influenced by 3 min read Primer CSS Flexbox Grids Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste 3 min read Like