Understanding Flex Box Element Order Property -Tutorial Savvy

Flex Box Layout System provides DISPLAY ORDERING feature for flex element.

The Syntax of this CSS property is order: <integer> .

This property is for the flex element only and not for the container.

This property changes the order of display of the element during Browser Painting time.But it does not effect the real elements ordering.

In this Demo,”We will learn how to use this property and check its effect to tab-index and Nth child positioning using first and last child selector“.

This demo has 4 different element with content A,B,C,D respectively.The parent of this element has display property set to inline-flex . Below code has the HTML and CSS for this demo.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>FlexBox Style Demo</title>
    <style>
        .flex-box-inline-container {
            display: inline-flex;
        }
        .flex-box-inline-container .element {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 24px;
            background: black;
            color: white;
            margin: 2px;
        }
        .flex-box-inline-container .element:focus {
            border: 5px solid red;
        }
        .flex-box-inline-container .element#box-one {
            order: 4;
        }
        .flex-box-inline-container .element#box-two {
            order: 3;
        }
        .flex-box-inline-container .element#box-three {
            order: 2;
        }
        .flex-box-inline-container .element#box-four {
            order: 1;
        }
        .flex-box-inline-container .element:first-child {
            background: green;
        }
        .flex-box-inline-container .element:last-child {
            background: blue;
        }
    </style>
</head>
<body>
    <h3>Demo: Flex Element Order</h3>
    <div class="flex-box-inline-container">
        <button class="element" id="box-one" >
            A
        </button>
        <button class="element" id="box-two">
            B
        </button>
        <button class="element" id="box-three">
            C
        </button>
        <button class="element" id="box-four">
            D
        </button>
    </div>
</body>
</html>

Below screenshot shows the output of the above code where the order of the elements are changed due to their order property.

Below screenshot shows the tab index of the elements are still the same and unchanged and not effected by flex order property.(press the tab button to see the red border)

Below screenshot shows the HTML mark up inspection where the natural element order is maintained but display positions are changed.

Jun 26, 2014Sandeep

Understanding Flex Box Element Order Property

Related

Sandeep