Primer CSS Flexbox Flex

Last Updated : 24 Apr, 2022

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> 