CSS Flexbox #7. The order Property
If you want to place flex-items in a particular sequence inside their flex-container, independently of how they are placed in the HTML code, you use the CSS Flexbox order property.
As you already learned in the first tutorial of this series, you can invert the order of the flex-items using row-reverse on the inline axis. This is useful when using right-to-left languages like Urdu or Hebrew.
It is also possible to invert the order of flex-items on the block axis using flex-direction: column-reverse.
The order property gives you much more flexibility because it allows you to visually change the order of each item and still keep the source order in the markup (HTML code). This is very useful for people, who use screen readers (accessibility is important).
Let’s take a look at an example.
[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]
As you already learned in the first tutorial of this series, you can invert the order of the flex-items using row-reverse on the inline axis. This is useful when using right-to-left languages like Urdu or Hebrew.
It is also possible to invert the order of flex-items on the block axis using flex-direction: column-reverse.
The order property gives you much more flexibility because it allows you to visually change the order of each item and still keep the source order in the markup (HTML code). This is very useful for people, who use screen readers (accessibility is important).
Let’s take a look at an example.
[[ This is a content summary only. Visit http://OSTraining.com for full links, other content, and more! ]]
No comments have been added yet.
