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

Output:

👁 Image

Example 2: In this example, we will use flex-grow-0 and flex-shrink-0 classes.

Output:

👁 Image

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