Primer CSS Flexbox Align Self

Last Updated : 25 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 Align Self classes are used to adjust the alignment of an individual flex item on the cross axis. If there is any align-item property applied then these classes will be over-written to those properties. There are six types of Align Self classes in Primer CSS as described below.

Primer CSS Flexbox Align Self Classes:

flex-self-auto: This class is used to align specific flex items according to the parent.
flex-self-start: This class is used to align specific flex items to the start of the cross axis.
flex-self-end: This class is used to align specific flex items to the end of the cross axis.
flex-self-center: This class is used to align specific flex items to the center of the cross axis.
flex-self-baseline: This class is used to align specific flex items to the baseline of the cross axis.
flex-self-stretch: This class is used to stretch specific flex items from the start of the cross-axis to the end of the cross axis.

Syntax:

<div class="border d-flex ">
    <div class="Flexbox-Align-Self-Class">
          ...
    </div>
    ...
</div>

Example 1: This example demonstrates the use of Primer CSS Flexbox Align Self using flex-self-start, flex-self-end, and flex-self-center classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Flexbox Align Self </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 Align Self 
    </h4> 
  
    <strong>Flexbox flex-self-start Class:</strong> 
    <br> 
    <div class="border d-flex m-2 " 
         style="min-height: 150px;"> 
          <div class="p-5 border flex-self-start 
                      color-bg-accent-emphasis"> 
          Flex item 1 
        </div> 
          <div class="p-5 border color-bg-success-emphasis"> 
          Flex item 2 
        </div> 
          <div class="p-5 border color-bg-danger-emphasis"> 
          Flex item 3 
        </div> 
    </div> 
  
    <strong>Flexbox flex-self-end Class:</strong> 
    <br> 
    <div class="border d-flex m-2 " 
         style="min-height: 150px;"> 
          <div class="p-5 border flex-self-end 
                      color-bg-accent-emphasis"> 
          Flex item 1 
        </div> 
          <div class="p-5 border color-bg-success-emphasis"> 
          Flex item 2 
        </div> 
          <div class="p-5 border color-bg-danger-emphasis"> 
          Flex item 3 
        </div> 
    </div> 
  
    <strong>Flexbox flex-self-center Class:</strong> 
    <br> 
    <div class="border d-flex m-2 " 
         style="min-height: 150px;"> 
        <div class="p-5 border flex-self-center 
                    color-bg-accent-emphasis"> 
            Flex item 1 
        </div> 
        <div class="p-5 border color-bg-success-emphasis"> 
            Flex item 2 
        </div> 
        <div class="p-5 border color-bg-danger-emphasis"> 
            Flex item 3 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Primer CSS Flexbox Align Self

Example 2: This example demonstrates the use of Primer CSS Flexbox Align Self using flex-self-baseline, flex-self-stretch, and flex-self-auto classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Flexbox Self Items </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 Self Items 
    </h4> 
  
    <strong>Flexbox flex-self-baseline Class:</strong> 
    <br> 
    <div style="min-height: 150px;" 
         class="border d-flex flex-items-end m-2"> 
        <div class="p-5 border color-bg-accent-emphasis  
                    flex-self-baseline"> 
            Flex item 1 
        </div> 
        <div class="p-5 border color-bg-success-emphasis"> 
            Flex item 2 
        </div> 
        <div class="p-5 border color-bg-danger-emphasis"> 
            Flex item 3 
        </div> 
    </div> 
  
    <strong>Flexbox flex-self-stretch Class:</strong> 
    <br> 
    <div style="min-height: 150px;" 
         class="border d-flex flex-items-end m-2"> 
        <div class="p-5 border color-bg-accent-emphasis  
                    flex-self-stretch"> 
            Flex item 1 
        </div> 
        <div class="p-5 border color-bg-success-emphasis"> 
            Flex item 2 
        </div> 
        <div class="p-5 border color-bg-danger-emphasis"> 
            Flex item 3 
        </div> 
    </div> 
      
    <strong>Flexbox flex-self-auto Class:</strong> 
    <br> 
    <div style="min-height: 150px;" 
         class="border d-flex flex-items-end m-2"> 
        <div class="p-5 border color-bg-accent-emphasis  
                    flex-self-auto"> 
            Flex item 1 
        </div> 
        <div class="p-5 border color-bg-success-emphasis"> 
            Flex item 2 
        </div> 
        <div class="p-5 border color-bg-danger-emphasis"> 
            Flex item 3 
        </div> 
    </div> 
</body> 
  
</html> 