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

The flexbox format module permits us to put out flex gadgets in any order and course. Flexbox ordering is, in reality, simpler than ordering with floats or CSS grid, even should you may not assume so at first. As flexbox is a one-dimensional format mannequin, versus CSS grid which is two-dimensional, you solely have to concentrate to at least one course. The principles are additionally clearly defined by W3C, so that you don’t should cope with the standard mess of floats and clearfixes.

By following this information, you’ll discover ways 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?

After we arrange a flexbox format we first have to outline the supply order, which means we’ve to resolve 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 primary axis and the cross axis. The principle axis can have considered one of 4 instructions, and the cross axis will all the time 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 all the time perpendicular to the primary axis. 

We arrange the primary axis with the flex-direction property, then we resolve how flex gadgets will wrap, utilizing the flex-wrap property. These two properties decide how the browser will lay out the gadgets throughout 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 modify 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 vary the HTML doc construction only for the sake of visible presentation. So, display screen reader customers (and search engines like google and yahoo) can get the content material in a logically structured means (e.g. the sidebar gained’t take priority over the primary content material). 

Flexbox Ordering

Flexbox ordering occurs with the flex-direction and flex-wrap properties. Flex-direction specifies the course of the primary axis. It could possibly take the next values:

  1. row (default) predominant axis: left to proper
  2. row-reverse predominant axis: proper to left
  3. column predominant axis: high to backside
  4. column-reverse predominant 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 course of the cross axis. It could possibly 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 the best way to arrange the primary axis in 4 completely different instructions utilizing flex-direction. Nonetheless, when discussing flexbox ordering, I feel it’s extra necessary to know the best way to use the flex-direction and flex-wrap properties collectively to realize 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 (nearly) the identical CSS in all examples, simply the flex-direction and flex-wrap properties will change. Right here’s how our CSS seems 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 attention-grabbing half! It’s not too obscure flexbox ordering in idea, however utilizing it in apply can actually be a problem. This occurs as a result of it’s tough to see how completely different variations of flex-direction and flex-wrap examine to one another.

Within the embedded pen beneath, you possibly can see how the flex-direction: row and flex-direction: column layouts work along with completely different values of the flex-wrap property. Use the shape controls to see completely different mixtures.

As you possibly can see, when flex-direction is row, flex gadgets are laid out horizontally, from left to proper. After we use wrap-reverse as a substitute of wrap, flexbox begins laying out the gadgets from the backside, as a substitute of from the high. This occurs as a result of wrap-reverse reverses the course of the cross axis.

When flex-direction is column, gadgets are laid out vertically, from high to backside. And, once we use wrap-reverse as a substitute of wrap, flexbox begins laying out the gadgets from the proper (now that is the start line of the cross axis), as a substitute 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 possibly can see within the demo above, flexbox begins laying out the gadgets from the beginning of the primary axis in each circumstances, similar to earlier than. The principle axis of the row-reverse format runs from proper to left, so flexbox begins laying out the gadgets from the suitable. And, the primary axis of the column-reverse format runs from backside to high, so gadgets begin to circulate from the underside of the flex container.

After 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.

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

Pace Issues Up With the flex-flow Shorthand

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

Flexbox Reordering

It’s time to have a look at issues a little bit otherwise. 

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 screen 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 a substitute of the flex container. It could possibly take any integer worth, and its default worth is 0.

The next instance strikes .item-3 to the start line of the primary 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 throughout the container:

You’ll discover that we are able to use the identical logic to maneuver .item-3 to the tip of the primary 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 needless to say reordering all the pieces in all probability isn’t essentially the most accessibility-friendly choice ever). The order properties of the completely different flex gadgets are all the time relative to one another. Under, you possibly can see the best way to reorder a number of gadgets throughout 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 once we modify the order of our flex gadgets, customers of non-visual media gained’t expertise the modifications. For instance, individuals counting on keyboard navigation will nonetheless transfer by the hyperlinks within the unique 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 Format” accessible with the assistance of flexbox ordering. The Holy Grail Format is the favored weblog format with a header, a footer, and two sidebars: one on the left and one on the suitable of the primary content material. 

On this format, we often put the left sidebar earlier than the primary content material within the HTML code. Nonetheless, from the viewpoint of accessibility, customers of assistive applied sciences ought to encounter the primary content material first. Flexbox is ideal for this. We are able to place the primary content material earlier than the 2 sidebars in our markup. Then, we solely have to put the sidebar and the primary content material into the right place utilizing the order property:

Flexbox & Writing Modes

All the things stated on this tutorial applies to the LTR (left to proper) writing mode. Flexbox axes really observe the doc’s writing course, which might be arrange with the direction and writing-mode properties. For this reason in LTR writing mode, the primary axis runs from left to proper when flex-direction is row. In RTL writing mode it runs in the other way, from proper to left, and all the pieces else modifications accordingly.

That’s a (Flex) Wrap!

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

Be taught Extra

Source link