Open In App

Primer CSS Flexbox Order

Last Updated : 24 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 Order classes are used to define the order of the flex items like we can sort them according to our needs. 2nd flex item can be placed first or in whatever place you want.

Primer CSS Flexbox Order: The number used for placement can be increased depending on the flex items number.

  • flex-order-1: This class is used to place the flex item on order 1.
  • flex-order-2:  This class is used to place the flex item on order 2.
  • flex-order-none: This class is used to terminate the ordering system in flexbox order.

Syntax: In this syntax, we will use only one class, other classes can be used as well as a replacement.

<div class="border d-flex">
    <div class="...">...</div>
    <div class="... flex-order-1">...</div>
    <div class="...">...</div>
</div>

Example 1: This example demonstrates the use of Primer CSS Flexbox Order.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Flexbox Order </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 Order
    </h4>
  
    <strong>Flexbox flex-order-1 Class:</strong>
    <br>
    <div class="border d-flex m-2">
          <div class="p-5 border color-bg-accent-emphasis">
          Flex item 1
        </div>
          <div class="p-5 border color-bg-success-emphasis flex-order-1">
          Flex item 2
        </div>
          <div class="p-5 border color-bg-danger-emphasis">
          Flex item 3
        </div>
    </div>
  
    <strong>Flexbox flex-order-2 Class:</strong>
    <br>
    <div class="border d-flex m-2">
          <div class="p-5 border color-bg-accent-emphasis flex-order-2">
          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 Order

Example 2: This is another example that demonstrates the use of Primer CSS Flexbox Order.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Flexbox Order </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 Order
    </h4>
  
    <strong>Flexbox flex-order-none Class:</strong>
    <br>
    <div class="border d-flex m-2">
          <div class="p-5 border color-bg-accent-emphasis">
          Flex item 1
        </div>
          <div class="p-5 border color-bg-success-emphasis 
                              flex-order-1 flex-order-none">
          Flex item 2
        </div>
          <div class="p-5 border color-bg-danger-emphasis">
          Flex item 3
        </div>
    </div>
  
    <strong>Flexbox flex-order-n Class:</strong>
    <br>
    <div class="border d-flex m-2">
        <div class="p-5 border color-bg-accent-emphasis flex-order-2">
          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 class="p-5 border color-bg-success-emphasis">
          Flex item 4
        </div>
          <div class="p-5 border color-bg-danger-emphasis ">
          Flex item 5
        </div>
    </div>
</body>
  
</html>


Output:

Primer CSS Flexbox Order

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



Similar Reads

Primer CSS Flexbox Align Items
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 Items used to align items on the cross axis. The cross axis al
3 min read
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
3 min read
Primer CSS Flexbox Flex Direction
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-direction is used to set the direction of the flex items in the
2 min read
Primer CSS Flexbox Flex Container
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 Container is used to make an element layout it's content using
2 min read
Primer CSS Flexbox Align Self
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
3 min read
Primer CSS Flexbox Align Content
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 ex
4 min read
Primer CSS Flexbox Example Components
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. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, an
3 min read
Primer CSS Flexbox Justify Content
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 Justify Content classes are used to distribute space between and aro
4 min read
Primer CSS Flexbox Responsive Flex Utilities
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates 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. Its approa
3 min read
Primer CSS Flexbox Grids
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates 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. Its approa
3 min read