Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 28 Jun, 2021
Geek Week

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
Recommended Articles
Page :