Skip to content
Related Articles

Related Articles

How to set the order of the flexible items using CSS ?

Improve Article
Save Article
  • Last Updated : 28 Jun, 2021
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 specifies the order of a flexible item 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 the Html page with various division elements and assign all div elements using different id numbers. Using order property you can rearrange these boxes in the correct order at any time.
 

Example:

 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        #gfg1 {
            margin-left: 145px;
            width: 350px;
            height: 100px;
            border-style: groove;
            display: flex;
            background-color: lightgrey;
        }
         
        #gfg1 div {
            width: 70px;
            height: 70px;
        }
         
        #gfg2 {
            margin-left: 145px;
            width: 350px;
            height: 100px;
            border-style: groove;
            display: flex;
            background-color: lightgrey;
        }
         
        #gfg2 div {
            width: 70px;
            height: 70px;
        }
         
        #gfg3 {
            margin-left: 145px;
            width: 280px;
            height: 100px;
            border-style: groove;
            display: flex;
            background-color: lightgrey;
        }
         
        #gfg3 div {
            width: 70px;
            height: 70px;
        }
         
        body {
            text-align: center;
            font-size: 20px;
        }
         
        div#div1 {
            order: 2;
        }
         
        div#div2 {
            order: 3;
        }
         
        div#div3 {
            order: 4;
        }
         
        div#div4 {
            order: 1;
        }
         
        div#div0 {
            order: 5
        }
    </style>
</head>
 
<body>
 
    <h1 style="color:green">GeeksForGeeks</h1>
 
    <div id=g fg1>
        <div style="background-color:green;"
             id="div0"></div>
        <div style="background-color:lightgreen;"
             id="div1">Geeks</div>
        <div style="background-color:green;"
             id="div2">For</div>
        <div style="background-color:lightgreen;"
             id="div3">Geeks</div>
        <div style="background-color:green;"
             id="div4"></div>
    </div>
    <div id=g fg2>
        <div style="background-color:green;"
             id="div0">portal</div>
        <div style="background-color:lightgreen;"
             id="div1">a</div>
        <div style="background-color:green;"
             id="div2">computer</div>
        <div style="background-color:lightgreen;"
             id="div3">science</div>
        <div style="background-color:green;"
             id="div4">is</div>
    </div>
    <div id=g fg3>
        <div style="background-color:green;"
             id="div0"></div>
        <div style="background-color:lightgreen;"
             id="div1"></div>
        <div style="background-color:green;"
             id="div2">for</div>
        <div style="background-color:lightgreen;"
             id="div3">geeks</div>
 
    </div>
 
 
 
 
 
</body>
 
</html>


Output:

Supported Browser: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!