From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

The order property

The order property - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

The order property

- [Instructor] Another new Flexbox property is order, which is used to change the layout order of flex items, without changing the HTML. This is something that was previously unavailable with traditional layout techniques. But note, this will only visually change the order. To make sure the content itself is still accessible, the source order of the content in the HTML should make sense. The order value is defined by a single number. By default, all flex items have an order value of zero and are laid out in the same order as they appear in the HTML. When using order, the flex container will layout its flex items starting from the lowest number. You can also use negative values to make items appear earlier than items set at zero. Again, this is only for making a visual change. Make sure the content in the HTML follows a logical order. In the floats layout exercise we weren't able to align the navigation before the main…

Contents