CSS order Property

This property specifies the position of each flexible item within the flexible container in relation to other items. It only gives the position of the items in the container and categorizes them in the order desired by the user. If the element is not a flexible item, this property is no longer available.

Syntax

order: number | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 100%;
        height: 150px;
        border: 1px solid #f2f3f5;
        display: -webkit-flex;
        display: flex;
    }
    .box div {
        width: 80px;
        height: 80px;
    }
    .order-2.yellow{
        order: 2;
        background: #ffc107;
    }
    .order-4.blue{
        order: 4;
        background: #1890FF;
    }
    .order-1.green{
        order: 1;
        background: #00ab55;
    }
    .order-3.red{
        order: 3;
        background: #ff4842;
    }
</style>
</head>
<body>

<div class="box">
    <div class="order-2 yellow">2</div>
    <div class="order-4 blue">4</div>
    <div class="order-1 green">1</div>
    <div class="order-3 red">3</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
number	The default value is 0. Specifies the flexible item's order.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
order	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	11.0	17.0

opacity

orphans

CSS order Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us