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

Last Updated : 30 May, 2023

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: In this example, we are using the above-explained method.

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>