Skip to content
Related Articles
Open in App
Not now

Related Articles

How to set the order of flexible items using CSS ?

Improve Article
Save Article
  • Last Updated : 27 Dec, 2022
Improve Article
Save Article

The purpose of the article is to set the order of the flexible items using CSS. You can achieve this task by using the CSS order property. 

CSS order Property: This property is used to specify the order of flexible items relative to the rest of the flexible items inside the same container and keep in mind to set elements as flexible.

Syntax:

order: value;

Approach: Create a HTML page with various div elements and assign id to all div elements. After that, we will set the width and height of div elements, and then use the order property to rearrange these boxes in the correct order.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to set the order of 
        flexible items using CSS?
    </title>
      
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        #gfg1, #gfg2, #gfg3 {
            margin: auto;
            width: 350px;
            height: 100px;
            border-style: groove;
            display: flex;
            background-color: lightgrey;
        }
  
        #gfg1 div, #gfg2 div, #gfg3 div {
            width: 70px;
            height: 70px;
        }
  
        #div0, #div2, #div4 {
            background-color: green;
        }
  
        #div1, #div3 {
            background-color: lightgreen;
        }
  
        div#div1 {
            order: 2;
        }
  
        div#div2 {
            order: 3;
        }
  
        div#div3 {
            order: 4;
        }
  
        div#div4 {
            order: 1;
        }
  
        div#div0 {
            order: 5
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
  
    <div id=gfg1>
        <div id="div0"></div>
        <div id="div1">Geeks</div>
        <div id="div2">For</div>
        <div id="div3">Geeks</div>
        <div id="div4"></div>
    </div>
  
    <div id=gfg2>
        <div id="div0">portal</div>
        <div id="div1">a</div>
        <div id="div2">computer</div>
        <div id="div3">science</div>
        <div id="div4">is</div>
    </div>
      
    <div id=gfg3>
        <div id="div0"></div>
        <div id="div1"></div>
        <div id="div2">for</div>
        <div id="div3">geeks</div>
    </div>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!