Order Flex Item

on June 2, 2020
🔥 1732 views
Contents hide
1) Order
2) Priority of order
3) Demo
4) Conclusion

Flex item in a container is laid out in the order in which they appear in the source code. This order can be change using the order property.

In our example, as we see there are 5 items and are arranged which is the order that appears in the code.

Order

let’s mix up our flex item using order. what we will do is in any one of the flex item class we will set order to 1and see whats happening.

index.html

<div class="container d-flex">
  <div class="flex-item item-1">Item 1</div>
  <div class="flex-item item-2">Item 2</div>
  <!-- Setting order:1 to item-3 class -->
  <div class="flex-item item-3">Item 3</div>
  <div class="flex-item item-4">Item 4</div>
  <div class="flex-item item-5">Item 5</div>
</div>

as we have individual class all items we can set the order property to item-3 or any item is upon you.

style.css
...
.item-3 {
    background-color: #1C4C56;
    order: 1
}
...

After adding this you will see the 3rd item will move to the last and that is because all items by default have an order of 0.
similarly, if we change the order of item 4 to order:2 it will push to the end of the container.

style.css
...
.item-4 {
    background-color: #1C4C56;
    order: 2
}
...

Priority of order

If the items having the same order for e.x: if item-2 and item-3 having the same order as order: 1

style.css
...
.item-2 {
    ...
    order: 1
}
.item-3 {
    ...
    order: 1
}
...

so the arrangement will be like.

  • The 0th order item will come first (By delault ones).
  • Then the item-2 will come next to it then item-3 because in source code also order is item-2 then item-3.
  • Incase the item-3 is above item-2 in source code then the item-3 will display first then item-2 if both having the same order.

So the priority of flex-items goes with what order is in source code.

Demo

See the Pen
GRoKerV by rehmaanali (@geekstrick)
on CodePen.

Conclusion

So the order property accepts the integer value and it is used to control the order of items in flex-container. element with the same order value is laid out in the order in which they appear in the source code.

Order Flex Item
.
.