Open In App

Primer CSS Flexbox

Improve
Improve
Like Article
Like
Save
Share
Report

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 an element layout it’s content using the flexbox model. Each direct child of the flex container will become a flex item.
  • Flex direction: flex-direction is used to set the direction of the flex items in the flexbox. 
  • Flex wrap: Flex wrap is used to place flex items into a single line or wrapped onto multiple lines.
  • Justify content: Justify Content classes are used to distribute space between and around flex items along the main axis of the container.
  • Align items: This is used to align the flex box item.
  • Align content: Align Content is used to create multiple main axis lines and adds extra space on the cross axis.
  • Flex:  Flex classes are used to define the ability of a flex item to alter its dimensions to fill available space.
  • Align self: Align Self classes are used to adjust the alignment of an individual flex item on the cross axis.
  • Order Order classes are used to define the order of the flex items like we can sort them according to our needs.
  • Responsive flex utilities: Responsive Flex utilities provide a flexible and responsive one-dimensional layout model that has efficient layouts with distributed spaces among items within a container.
  • Example components:  Example Components is used to create the various components in Primer CSS using the flexbox classes.

Example 1: The following code demonstrates the flex-row class which shifts the direction of the axis from left to right.

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 
    </h4>
  
    <strong>Flexbox row</strong>
    <br>
    <div class="border d-flex flex-column flex-sm-row">
        <div class="p-5 border color-bg-subtle">Item 1</div>
        <div class="p-5 border color-bg-subtle">Item 2</div>
        <div class="p-5 border color-bg-subtle">Item 3</div>
      </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: The following code demonstrates the flex-row-reverse class which shifts the direction of the axis from right to left.

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 
    </h4>
  
    <strong>Flexbox row-reverse</strong>
    <br>
    <div class="border d-flex flex-column flex-sm-row-reverse">
        <div class="p-5 border color-bg-subtle">Item 1</div>
        <div class="p-5 border color-bg-subtle">Item 2</div>
        <div class="p-5 border color-bg-subtle">Item 3</div>
      </div>
    </div>
</body>
  
</html>


Output:

 

Example 3: The following code demonstrates the flex-column class which shifts the direction of the axis from top to bottom.

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 
    </h4>
  
    <strong>Flexbox column</strong>
    <br>
    <div class="border d-flex flex-column">
        <div class="p-5 border color-bg-subtle">Item 1</div>
        <div class="p-5 border color-bg-subtle">Item 2</div>
        <div class="p-5 border color-bg-subtle">Item 3</div>
    </div>    
</body>
</html>


Output:

 

Example 4: The following code demonstrates the flex-column-reverse class which shifts the direction of the axis from bottom to top.

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 
    </h4>
  
    <strong>Flexbox column-reverse</strong>
    <br>
    <div class="border d-flex flex-column-reverse">
        <div class="p-5 border color-bg-subtle">Item 1</div>
        <div class="p-5 border color-bg-subtle">Item 2</div>
        <div class="p-5 border color-bg-subtle">Item 3</div>
    </div>
    </div>
</body>
  
</html>


Output:

 

Example 5: The following example demonstrates the flex-wrap class which wraps the line in multiple lines. 

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 
    </h4>
  
    <strong>Flexbox Wrap</strong>
    <br>
    <div class="border d-flex flex-wrap">
        <div class="p-5 px-6 border color-bg-subtle">A</div>
        <div class="p-5 px-6 border color-bg-subtle">B</div>
        <div class="p-5 px-6 border color-bg-subtle">C</div>
        <div class="p-5 px-6 border color-bg-subtle">D</div>
        <div class="p-5 px-6 border color-bg-subtle">E</div>
        <div class="p-5 px-6 border color-bg-subtle">F</div>
        <div class="p-5 px-6 border color-bg-subtle">G</div>
        <div class="p-5 px-6 border color-bg-subtle">H</div>
        <div class="p-5 px-6 border color-bg-subtle">I</div>
        <div class="p-5 px-6 border color-bg-subtle">J</div>
        <div class="p-5 px-6 border color-bg-subtle">K</div>
        <div class="p-5 px-6 border color-bg-subtle">L</div>
        <div class="p-5 px-6 border color-bg-subtle">M</div>
        <div class="p-5 px-6 border color-bg-subtle">N</div>
      </div>
    </div>
</body>
  
</html>


Output:

 

Example 6: The following code demonstrates the flex-nowrap class.

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 
    </h4>
  
    <strong>Flexbox NoWrap</strong>
    <br>
    <div class="border d-flex flex-nowrap">
        <div class="p-5 px-6 border color-bg-subtle">A</div>
        <div class="p-5 px-6 border color-bg-subtle">B</div>
        <div class="p-5 px-6 border color-bg-subtle">C</div>
        <div class="p-5 px-6 border color-bg-subtle">D</div>
        <div class="p-5 px-6 border color-bg-subtle">E</div>
        <div class="p-5 px-6 border color-bg-subtle">F</div>
        <div class="p-5 px-6 border color-bg-subtle">I</div>
        <div class="p-5 px-6 border color-bg-subtle">J</div>
        <div class="p-5 px-6 border color-bg-subtle">K</div>
        <div class="p-5 px-6 border color-bg-subtle">L</div>
        <div class="p-5 px-6 border color-bg-subtle">M</div>
        <div class="p-5 px-6 border color-bg-subtle">N</div>
        <div class="p-5 px-6 border color-bg-subtle">O</div>
        <div class="p-5 px-6 border color-bg-subtle">P</div>
        <div class="p-5 px-6 border color-bg-subtle">Q</div>
    </div>    
</body>
</html>


Output:

 

Example 7: The following code demonstrates the flex-wrap-reverse class.

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 
    </h4>
  
    <strong>Flexbox wrap reverse</strong>
    <br>
    <div class="border d-flex flex-wrap-reverse">
        <div class="p-5 px-6 border color-bg-subtle">A</div>
        <div class="p-5 px-6 border color-bg-subtle">B</div>
        <div class="p-5 px-6 border color-bg-subtle">C</div>
        <div class="p-5 px-6 border color-bg-subtle">D</div>
        <div class="p-5 px-6 border color-bg-subtle">E</div>
        <div class="p-5 px-6 border color-bg-subtle">F</div>
        <div class="p-5 px-6 border color-bg-subtle">I</div>
        <div class="p-5 px-6 border color-bg-subtle">J</div>
        <div class="p-5 px-6 border color-bg-subtle">K</div>
        <div class="p-5 px-6 border color-bg-subtle">L</div>
        <div class="p-5 px-6 border color-bg-subtle">M</div>
        <div class="p-5 px-6 border color-bg-subtle">N</div>
        <div class="p-5 px-6 border color-bg-subtle">O</div>
        <div class="p-5 px-6 border color-bg-subtle">P</div>
        <div class="p-5 px-6 border color-bg-subtle">Q</div>
    </div>    
</body>
</html>


Output:

 

Example 8: The following code demonstrates the d-flex class which makes the element behave like a block.

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 
    </h4>
  
    <strong>Flexbox d-flex</strong>
    <br>
    <div class="border d-flex">
        <div class="p-5 border color-bg-subtle">flex item 1</div>
        <div class="p-5 border color-bg-subtle">flex item 2</div>
        <div class="p-5 border color-bg-subtle">flex item 3</div>
    </div>
    <div class="border d-flex">
        <div class="p-5 border color-bg-subtle">flex item 1</div>
        <div class="p-5 border color-bg-subtle">flex item 2</div>
        <div class="p-5 border color-bg-subtle">flex item 3</div>
    </div>
</body>
</html>


Output:

 

Example 9: The following code demonstrates the d-inline-flex class which makes the element behave in an inline fashion.

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 
    </h4>
  
    <strong>Flexbox d-inline-flex</strong>
    <br>
    <div class="border d-inline-flex">
        <div class="p-5 border color-bg-subtle">flex item 1</div>
        <div class="p-5 border color-bg-subtle">flex item 2</div>
        <div class="p-5 border color-bg-subtle">flex item 3</div>
    </div>
    <div class="border d-inline-flex">
        <div class="p-5 border color-bg-subtle">flex item 1</div>
        <div class="p-5 border color-bg-subtle">flex item 2</div>
        <div class="p-5 border color-bg-subtle">flex item 3</div>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/utilities/flexbox



Last Updated : 07 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads