The order Property in CSS

CSS | order Property: Here, we are going to learn about the order Property with syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 07, 2020

CSS | order Property

Introduction:

Web development is an ever-growing field that would never find its end, therefore it is equally necessary to learn new ways to deal with the elements of the web page or web development. Dealing with texts, containers and various such elements need their own set of properties and values. Hence while developing or creating a web page or website on must keep looking for new and innovative ways to deal with the elements.

This section is about a property that is widely used while using flexible items in a web page. How to deal with those items to make the web page or website more responsive will be discussed in this article. So buckle up and get ready for a lot of knowledge is coming right up! The property in the discussion here today is order Property in CSS.

Elaboration:

The order property in CSS is used to give the order of each flexible item about other flexible items in the flexible container. If the item is not flexible the order property is of no use.

Syntax:

    Element{
        order : number|initial|inherit;
    }

The order property does not take up much of the values, the only value that it takes is known as number. Let us understand this value much more clearly.

order : number

The number value of the property as the name itself suggests is used for using assigning numbers or orders to the flexible item, so let us move further with a much more formal definition.

This value of the order property is used to give the order of flexible items and gives numbers corresponding to every item according to the user's requirement.

The default value of this value is 0.

Syntax:

    Element{
        order : number;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        #main {
            width: 400px;
            height: 150px;
            border: 1px solid #c3c3c3;
            display: flex;
        }
        
        #main div {
            width: 100px;
            height: 100px;
        }
        
        div#DIV1 {
            order: 2;
        }
        
        div#DIV2 {
            order: 4;
        }
        
        div#DIV3 {
            order: 3;
        }
        
        div#DIV4 {
            order: 1;
        }
    </style>
</head>

<body>
    <h1>The order Property</h1>
    <div id="main">
        <div style="background-color:green;" id="DIV1"></div>
        <div style="background-color:red;" id="DIV2"></div>
        <div style="background-color:pink;" id="DIV3"></div>
        <div style="background-color:blue;" id="DIV4"></div>
    </div>
</body>

</html>

Output

In the above example, it can be easily seen that the order of each item is given and hence the item is displayed in its corresponding order.

Ending note:

Although this property may sound a bit confusing if implemented properly and wisely then this property will surely prove to be a very strong asset for the development and creation of a very responsive web page.

However, dealing with flexible items can become quite tricky but we all are familiar with the phrase-practice makes a man perfect! So go on grab your systems and start coding!

CSS Tutorial & Examples »

The object-fit Property in CSS

The quotes Property in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples