Sunday May 30, 2021 By David Quintanilla
A Comprehensive Guide to Flexbox Ordering & Reordering

The flexbox structure module permits us to put out flex gadgets in any order and path. Flexbox ordering is, the truth is, simpler than ordering with floats or CSS grid, even if you happen to may not suppose so at first. As flexbox is a one-dimensional structure mannequin, versus CSS grid which is two-dimensional, you solely have to concentrate to 1 path. The principles are additionally clearly defined by W3C, so that you don’t must take care of the standard mess of floats and clearfixes.

By following this information, you’ll learn to use the next flexbox properties for ordering functions:

  • flex-direction
  • flex-wrap
  • flex-flow
  • order

Watch the Video: CSS Flexbox Ordering

Ordering Vs. Reordering

When speaking about flexbox ordering, we have to clarify the distinction between ordering and reordering

What’s Ordering?

Once we arrange a flexbox structure we first have to outline the supply order, which means we’ve got to determine how the axes of the flex container are positioned. I wrote intimately about how flexbox axes work in my guide about flexbox alignment.

Briefly, every flex container has two axes: the principle axis and the cross axis. The primary axis could have certainly one of 4 instructions, and the cross axis will at all times be perpendicular to that:

  1. left to proper
  2. proper to left
  3. high to backside
  4. backside to high
The cross axis is always perpendicular to the main axis The cross axis is always perpendicular to the main axis The cross axis is always perpendicular to the main axis
The cross axis is at all times perpendicular to the principle axis. 

We arrange the principle axis with the flex-direction property, then we determine how flex gadgets will wrap, utilizing the flex-wrap property. These two properties decide how the browser will lay out the gadgets inside the flex container.

So What’s Reordering?

Flexbox additionally lets us manipulate the default supply order, successfully reordering, with the assistance of the order property. Reordering signifies that we alter the visible rendering of the gadgets, whereas the supply order stays intact. 

If we use the reordering capabilities of flexbox, we don’t have to alter the HTML doc construction only for the sake of visible presentation. So, display reader customers (and engines like google) can get the content material in a logically structured approach (e.g. the sidebar received’t take priority over the principle content material). 

Flexbox Ordering

Flexbox ordering occurs with the flex-direction and flex-wrap properties. Flex-direction specifies the path of the principle axis. It might probably take the next values:

  1. row (default) most important axis: left to proper
  2. row-reverse most important axis: proper to left
  3. column most important axis: high to backside
  4. column-reverse most important axis: backside to high

Flex-wrap defines if flex gadgets are specified by a single line or wrap to a number of traces. It additionally controls the path of the cross axis. It might probably have three values:

  1. nowrap (default) lays out flex gadgets in a single line; the cross axis stands within the default place
  2. wrap lays out flex gadgets in a number of traces; the cross axis stands within the default place
  3. wrap-reverse lays out flex gadgets in a number of traces; the cross axis is reversed

The default place of the cross axis is:

  • high to backside in case of row and row-reverse
  • left to proper in case of column and column-reverse

In my earlier article about flexbox alignment, yow will discover 4 detailed examples (with demos) about arrange the principle axis in 4 totally different instructions utilizing flex-direction. Nevertheless, when discussing flexbox ordering, I believe it’s extra necessary to know use the flex-direction and flex-wrap properties collectively to attain the supply order we’re in search of.

A Fast Code Instance

We’ll use a easy code instance to see how flexbox ordering works. The HTML right here consists of just some divs:

The .container div would be the flex container and the divs with the .merchandise class would be the flex gadgets. We’ll use (virtually) the identical CSS in all examples, simply the flex-direction and flex-wrap properties will change. Right here’s how our CSS appears to be like with the row and wrap values:

Right here’s the identical instance in a CodePen demo:

Ordering With Row and Column

Now, we’ve reached the actually fascinating half! It’s not too obscure flexbox ordering in idea, however utilizing it in observe can actually be a problem. This occurs as a result of it’s troublesome to see how totally different variations of flex-direction and flex-wrap evaluate to one another.

Within the embedded pen beneath, you’ll be able to see how the flex-direction: row and flex-direction: column layouts work along with totally different values of the flex-wrap property. Use the shape controls to see totally different mixtures.

As you’ll be able to see, when flex-direction is row, flex gadgets are laid out horizontally, from left to proper. Once we use wrap-reverse as an alternative of wrap, flexbox begins laying out the gadgets from the backside, as an alternative of from the high. This occurs as a result of wrap-reverse reverses the path of the cross axis.

When flex-direction is column, gadgets are laid out vertically, from high to backside. And, after we use wrap-reverse as an alternative of wrap, flexbox begins laying out the gadgets from the proper (now that is the start line of the cross axis), as an alternative of from the left.

Ordering With row-reverse and column-reverse

Now, let’s take a look at how flexbox lays out gadgets when flex-direction is row-reverse and column-reverse.

As you’ll be able to see within the demo above, flexbox begins laying out the gadgets from the beginning of the principle axis in each circumstances, identical to earlier than. The primary axis of the row-reverse structure runs from proper to left, so flexbox begins laying out the gadgets from the correct. And, the principle axis of the column-reverse structure runs from backside to high, so gadgets begin to circulate from the underside of the flex container.

Once we use flex-wrap: wrap, flexbox begins to wrap the gadgets from the high when flex-direction is row-reverse and from the left when it’s column-reverse, as these are the beginning factors of the cross axis within the respective circumstances.

Once we flip the wrapping path to flex-wrap: wrap-reverse, the cross axis will run in the wrong way. It would level from backside to high when flex-direction is row-reverse, and from proper to left when it’s column-reverse.

Velocity Issues Up With the flex-flow Shorthand

CSS additionally has a cool shorthand for the flex-direction and flex-wrap properties. It’s referred to as flex-flow. To make use of it, we have to listing the 2 properties after one another within the following approach:

Flexbox Reordering

It’s time to take a look at issues a bit of in a different way. 

The order property modifications the default ordering of flex gadgets that we outline with flex-direction and flex-flow. It solely impacts the visible rendering of the gadgets, so it doesn’t have an effect on the best way how display readers and different non-CSS consumer brokers learn the supply code.

Versus the properties talked about earlier than, we use order on the flex gadgets, as an alternative of the flex container. It might probably take any integer worth, and its default worth is 0.

The next instance strikes .item-3 to the start line of the principle axis. As all gadgets have 0 as default worth, it’s sufficient to make use of the order: -1 rule to make it the primary merchandise inside the container:

You’ll discover that we are able to use the identical logic to maneuver .item-3 to the tip of the principle axis. We solely have to outline a constructive order worth for it.

After all, we are able to reorder as many of those flex gadgets as we want (although remember the fact that reordering every thing in all probability isn’t probably the most accessibility-friendly determination ever). The order properties of the totally different flex gadgets are at all times relative to one another. Under, you’ll be able to see reorder a number of gadgets inside the flex container.

Ordering and Accessibility

Crucial factor to grasp about all that is that the order property doesn’t have an effect on the portray, speech, and sequential navigation orders. Which means that after we modify the order of our flex gadgets, customers of non-visual media received’t expertise the modifications. For instance, folks counting on keyboard navigation will nonetheless transfer by way of the hyperlinks within the authentic supply order.

This flexbox conduct can come in useful in some circumstances. As an example, it’s attainable to make the so-called “Holy Grail Structure” accessible with the assistance of flexbox ordering. The Holy Grail Structure is the favored weblog structure with a header, a footer, and two sidebars: one on the left and one on the correct of the principle content material. 

On this structure, we normally put the left sidebar earlier than the principle content material within the HTML code. Nevertheless, from the viewpoint of accessibility, customers of assistive applied sciences ought to encounter the principle content material first. Flexbox is ideal for this. We will place the principle content material earlier than the 2 sidebars in our markup. Then, we solely have to put the sidebar and the principle content material into the proper place utilizing the order property:

Flexbox & Writing Modes

All the pieces mentioned on this tutorial applies to the LTR (left to proper) writing mode. Flexbox axes really observe the doc’s writing path, which could be arrange with the direction and writing-mode properties. This is the reason in LTR writing mode, the principle axis runs from left to proper when flex-direction is row. In RTL writing mode it runs in the wrong way, from proper to left, and every thing else modifications accordingly.

That’s a (Flex) Wrap!

This tutorial was the second a part of my flexbox collection. Ensure you learn the primary half about flexbox alignment, to learn to align flex gadgets alongside the principle and cross axes. If you wish to know extra about flexbox ordering, MDN has a really informative article on the topic as nicely. 

Study Extra

Source link