Skip to content
Related Articles

Related Articles

Primer CSS Flexbox Align Content

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Apr, 2022
View Discussion
Improve Article
Save Article

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 Content is used to create multiple main axis lines and adds extra space in the cross axis. Also, these classes are used to align the lines of the main axis on the cross axis.

Primer CSS Flexbox Align content Classes:

  • flex-content-start: This class is used to align specific content items to the start of the cross axis.
  • flex-content-end: This class is used to align specific content items to the end of the cross axis.
  • flex-content-center: This class is used to align specific content items to the center of the cross axis.
  • flex-content-between: This class is used to distribute the content evenly.
  • flex-content-around: This class is used to align specific content items around a cross axis.
  • flex-content-stretch: This class is used to stretch specific content items from the start of the cross-axis to the end of the cross axis.

Syntax:

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

Example 1: This example demonstrates the Primer CSS Flexbox Align Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Flexbox Align Content </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 Content
    </h4> <br>
  
    <strong> Flexbox flex-content-start Class </strong>
    <div style="min-height: 120px;" 
         class="border d-flex m-2 flex-wrap 
                flex-content-start">
        <div class="p-5 border color-bg-accent-emphasis">
            First Item
        </div>
        <div class="p-5 border color-bg-success-emphasis">
            Second Item
        </div>
        <div class="p-5 border color-bg-danger-emphasis">
            Third Item
        </div>
        <div class="p-5 border color-bg-accent">
            Fourth Item
        </div>
        <div class="p-5 border color-bg-success">
            Fifth Item
        </div>
        <div class="p-5 border color-bg-danger">
            Sixth Item
        </div>
    </div> <br>
  
    <strong> Flexbox flex-content-center Class </strong>
    <div style="min-height: 120px;" 
         class="border d-flex m-2 flex-wrap 
                flex-content-center">
        <div class="p-5 border color-bg-accent-emphasis">
            First Item
        </div>
        <div class="p-5 border color-bg-success-emphasis">
            Second Item
        </div>
        <div class="p-5 border color-bg-danger-emphasis">
            Third Item
        </div>
        <div class="p-5 border color-bg-accent">
            Fourth Item
        </div>
        <div class="p-5 border color-bg-success">
            Fifth Item
        </div>
        <div class="p-5 border color-bg-danger">
            Sixth Item
        </div>
    </div> <br>
  
    <strong> Flexbox flex-content-end Class </strong>
    <div style="min-height: 120px;" 
         class="border d-flex m-2 flex-wrap 
                flex-content-end">
        <div class="p-5 border color-bg-accent-emphasis">
            First Item
        </div>
        <div class="p-5 border color-bg-success-emphasis">
            Second Item
        </div>
        <div class="p-5 border color-bg-danger-emphasis">
            Third Item
        </div>
        <div class="p-5 border color-bg-accent">
            Fourth Item
        </div>
        <div class="p-5 border color-bg-success">
            Fifth Item
        </div>
        <div class="p-5 border color-bg-danger">
            Sixth Item
        </div>
    </div>
</body>
  
</html>

Output:

Primer CSS Flexbox Align Content

Example 2: This example demonstrates the Primer CSS Flexbox Align Content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Flexbox Align Content </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 Content
    </h4> <br>
      
    <strong> Flexbox flex-content-between Class </strong>
    <div style="min-height: 120px;" 
         class="border d-flex m-2 flex-wrap 
                flex-content-between">
        <div class="p-5 border color-bg-accent-emphasis">
            First Item
        </div>
        <div class="p-5 border color-bg-success-emphasis">
            Second Item
        </div>
        <div class="p-5 border color-bg-danger-emphasis">
            Third Item
        </div>
        <div class="p-5 border color-bg-accent">
            Fourth Item
        </div>
        <div class="p-5 border color-bg-success">
            Fifth Item
        </div>
        <div class="p-5 border color-bg-danger">
            Sixth Item
        </div>
    </div> <br>
  
    <strong> Flexbox flex-content-around Class </strong>
    <div style="min-height: 120px;" 
         class="border d-flex m-2 flex-wrap 
                flex-content-around">
        <div class="p-5 border color-bg-accent-emphasis">
            First Item
        </div>
        <div class="p-5 border color-bg-success-emphasis">
            Second Item
        </div>
        <div class="p-5 border color-bg-danger-emphasis">
            Third Item
        </div>
        <div class="p-5 border color-bg-accent">
            Fourth Item
        </div>
        <div class="p-5 border color-bg-success">
            Fifth Item
        </div>
        <div class="p-5 border color-bg-danger">
            Sixth Item
        </div>
    </div> <br>
  
    <strong> Flexbox flex-content-stretch Class </strong>
    <div style="min-height: 120px;" 
         class="border d-flex m-2 flex-wrap 
                flex-content-stretch">
        <div class="p-5 border color-bg-accent-emphasis">
            First Item
        </div>
        <div class="p-5 border color-bg-success-emphasis">
            Second Item
        </div>
        <div class="p-5 border color-bg-danger-emphasis">
            Third Item
        </div>
        <div class="p-5 border color-bg-accent">
            Fourth Item
        </div>
        <div class="p-5 border color-bg-success">
            Fifth Item
        </div>
        <div class="p-5 border color-bg-danger">
            Sixth Item
        </div>
    </div>
</body>
  
</html>

Output:

Primer CSS Flexbox Align Content

Reference: https://primer.style/css/utilities/flexbox#align-content


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!