Search code examples
cssflexbox

Is there any start and end for order property in flex?

I want to know that is there any begin or end number for arranging elements in a flex container ? For example :

.firstOrder {
    order: <First-Item>
}

Why ? Because I want to create a CSS framework, So I want to know can I add 2 classes to order First item and Last item.

Solution

  • No, there are not any specific start or end number.

    Any number is usable, both positive and negative, and the one's with lower comes first, and a flex item's default is 0.

    If two, or more, items have the same value, it is their order in the markup that decides.

    In your case, having a first and last, and based on the default of 0, giving one item -1 and another 1, will make the item with -1 first and the item with 1 last.

    Based on a comment by Ali, it should be noted that older Flexbox versions might have a different default value, e.g. it appears for -webkit-box-ordinal-group to be 1.