Skip to content
Related Articles

Related Articles

Improve Article

How to set order of the flexible items inside the division element in CSS ?

  • Last Updated : 21 May, 2021
Geek Week

 The order property in CSS is used to specify the order of the flexible items inside the container. So to set the order of the flexible items inside the division element we use the order property and set the order of the items in CSS. In this article, we will learn how to set the order of the flexible items inside the division element in CSS. 

Syntax: 

order: value;

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        center{
            margin: 50px;
            color:green;
            font-size: 60px;
        }
        .parent{
            display: flex;
            border: solid 3px red;
            width: 400px;
        }
        .gfg1{   
            order: 2;
            background-color: wheat;
        
        .gfg2{
            order: 1;
            background-color: rgb(197, 197, 197);
        }
        .gfg3{
            order: 3;
            background-color:azure;
        }
    </style>
</head>
<body>
    <center>
        <div class="parent">
            <div class="gfg1">for</div>
            <div class="gfg2">Geeks</div>
            <div class="gfg3">Geeks</div>
        </div>
    </center>
</body>
</html>

Output:

  • Before applying the order property:

  • After applying the order property:




My Personal Notes arrow_drop_up
Recommended Articles
Page :