CSS Tutorials
Tags: ,
Categories: , ,

Overview

The order property determines the order of a flex item. The first flex item to appear in the code does not have to appear as the first item in the layout.

Note

The following are basic examples. Towards the bottom of this page you’ll find a complete list of all applicable properties, where you can find more information on the properties discussed, and sometimes find more involved properties not discussed on this page.

Specifying the Order of items

In the following, the three boxes are not ordered and sit in their natural order.

<div class="flex_container">
    <div class="div_1">Box 1</div>
    <div class="div_2">Box 2</div>
    <div class="div_3">Box 3</div>
</div>
.flex_container {
    display: flex;
    background-color: #ffbd02;
}
.flex_container > div {
    background-color: #eaeaea;
    margin: 10px;
    padding: 20px;
    font-size: 22px;
}
Box 1
Box 2
Box 3

However, if we add lines 11 through 19, we can define a different order for the flex items.

.flex_container {
    display: flex;
    background-color: #ffbd02;
}
.flex_container > div {
    background-color: #eaeaea;
    margin: 10px;
    padding: 20px;
    font-size: 22px;
}
.div_1 {
	order: 1;
}
.div_2 {
	order: 3;
}
.div_3 {
	order: 2;
}
Box 1
Box 2
Box 3

Flex Properties

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.