Order and Wrap
Understand various utilities for controlling, ordering, and wrapping items in the flexbox.
We'll cover the following
Property
The next most important property of the flexbox is whether it will wrap, which is a property of the parent of the box. The default is not to wrap, .flex-no-wrap
, but if we specify .flex-wrap
, then our row container will automatically move items to the next row if the item would overflow the main axis of the container. Normally, that would be going over the width of a row flexbox, but we could also explicitly set the height of a column box and have it wrap. If we want to wrap right to left, Tailwind provides .flex-wrap-reverse
.
We can explicitly specify the order of the elements in the flexbox with the .order-{integer}
utility, where the suffix is any integer from 1
to 12
, or we can use .order-first
, .order-last
, or .order-none
. Suppose the order is specified for one or more elements in the flexbox. In that case, that order
property determines where in the box that element goes, overriding order
in which the element appears in the source HTML.
One great use of this property is to allow the main content to come before the other elements in the source order
, but still display correctly. This code provides the same layout as the snippet shown earlier:
We’ll try the following properties classes in the playground below:
order-1
order-2
order-4
order-5
Get hands-on with 1200+ tech skills courses.