Primer CSS Flexbox Flex 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 classes are used to define the ability of a flex item to alter its dimensions to fill available space. When you are working with multiple similar types of components, flex is the most useful feature to use. There are 4 classes of flex in Primer CSS Flexbox flex, all of them are mentioned and described below. Primer CSS Flexbox Flex Classes: flex-1: This class is used to fill the remaining available space.flex-auto: This class is used to fill the available space and auto-sizes based on the content.flex-grow-0: This class is used to restrict the growth feature of any item.flex-shrink-0: This class is used to restrict the growth feature of any item. Syntax: In this syntax, we will use only one class, other classes can be used as a replacement. <div class="border d-flex"> <div class="...">...</div> <div class="... flex-1">...</div> <div class="...">...</div> </div> Below are examples illustrating the Primer CSS Flexbox Flex: Example 1: In this example, we will use the flex-1 and flex-auto classes. HTML <!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 Flexbox Flex </h4> <strong>Flexbox flex-1 Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis flex-1"> .flex-1 </div> <div class="p-5 border color-bg-danger-emphasis"> A Computer Portal </div> </div> <strong>Flexbox flex-auto Class:</strong> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis flex-1"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis flex-auto"> .flex-auto </div> <div class="p-5 border color-bg-danger-emphasis flex-1"> A Computer Portal </div> </div> </body> </html> Output: Primer CSS Flexbox Flex Example 2: In this example, we will use flex-grow-0 and flex-shrink-0 classes. HTML <!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 Flexbox Flex </h4> <strong>Flexbox flex-shrink-0 Class:</strong> <br> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis"> A Computer Portal </div> <div class="p-5 border color-bg-danger-emphasis flex-shrink-0"> flex-shrink-0 </div> </div> <strong>Flexbox flex-grow-0 Class:</strong> <div class="border d-flex m-2"> <div class="p-5 border color-bg-accent-emphasis flex-1"> Geeksforgeeks </div> <div class="p-5 border color-bg-success-emphasis flex-auto flex-grow-0"> .flex-grow-0 </div> <div class="p-5 border color-bg-danger-emphasis flex-1"> A Computer Portal </div> </div> </body> </html> Output: Primer CSS Flexbox Flex Reference: https://primer.style/css/utilities/flexbox#flex Comment More infoAdvertise with us Next Article Primer CSS Flexbox Flex S skyridetim Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads 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 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 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 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 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 CSS flex-flow Property The flex-flow property is a sub-property of the flexible box layout module and also a shorthand property for flex-wrap and flex-direction. Note:The flex property is useless when the element is not a flexible item. Syntax:flex-flow: flex-direction flex-wrap;Values of flex-flow property:row nowrap: It 8 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 Align Self 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 Align Self classes 3 min read Primer CSS Flexbox Responsive Flex Utilities 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