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
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