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

The flexbox format module permits us to put out flex objects in any order and path. Flexbox ordering is, in reality, simpler than ordering with floats or CSS grid, even if you happen to 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 path. The principles are additionally clearly defined by W3C, so that you don’t must take care of the same old 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 now have 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.

In short, every flex container has two axes: the primary axis and the cross axis. The primary axis could 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 determine how flex objects will wrap, utilizing the flex-wrap property. These two properties decide how the browser will lay out the objects 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 alter the visible rendering of the objects, 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 serps) can get the content material in a logically structured manner (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 path of the primary axis. It might probably take the next values:

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

Flex-wrap defines if flex objects 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 objects in a single line; the cross axis stands within the default place
  2. wrap lays out flex objects in a number of traces; the cross axis stands within the default place
  3. wrap-reverse lays out flex objects 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, you’ll find 4 detailed examples (with demos) about arrange the primary axis in 4 completely different instructions utilizing flex-direction. Nevertheless, when discussing flexbox ordering, I feel it’s extra vital 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 objects. 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 attention-grabbing half! It’s not too obscure flexbox ordering in concept, however utilizing it in observe can actually be a problem. This occurs as a result of it’s troublesome 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 combos.

As you possibly can see, when flex-direction is row, flex objects are laid out horizontally, from left to proper. After we use wrap-reverse as an alternative of wrap, flexbox begins laying out the objects 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, objects are laid out vertically, from high to backside. And, after we use wrap-reverse as an alternative of wrap, flexbox begins laying out the objects 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 objects when flex-direction is row-reverse and column-reverse.

As you possibly can see within the demo above, flexbox begins laying out the objects from the beginning of the primary axis in each instances, similar to earlier than. The primary axis of the row-reverse format runs from proper to left, so flexbox begins laying out the objects from the suitable. And, the primary axis of the column-reverse format runs from backside to high, so objects begin to circulate from the underside of the flex container.

After we use flex-wrap: wrap, flexbox begins to wrap the objects 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 instances.

After we flip the wrapping path to flex-wrap: wrap-reverse, the cross axis will run in the wrong way. It is going to 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 record the 2 properties after one another within the following manner:

Flexbox Reordering

It’s time to have a look at issues just a little in another way. 

The order property adjustments the default ordering of flex objects that we outline with flex-direction and flex-flow. It solely impacts the visible rendering of the objects, 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 objects, 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 primary axis. As all objects 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 optimistic order worth for it.

In fact, we are able to reorder as many of those flex objects as we want (although needless to say reordering all the things most likely isn’t essentially the most accessibility-friendly determination ever). The order properties of the completely different flex objects are all the time relative to one another. Under, you possibly can see reorder a number of objects throughout the flex container.

Ordering and Accessibility

An important factor to grasp about all that is that the order property doesn’t have an effect on the portray, speech, and sequential navigation orders. Because of this after we modify the order of our flex objects, customers of non-visual media gained’t expertise the adjustments. For instance, individuals counting on keyboard navigation will nonetheless transfer by way of the hyperlinks within the unique supply order.

This flexbox habits can turn out to be useful in some instances. For example, it’s doable to make the so-called “Holy Grail Structure” accessible with the assistance of flexbox ordering. The Holy Grail Structure 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 normally put the left sidebar earlier than the primary content material within the HTML code. Nevertheless, 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 proper 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 comply with the doc’s writing path, which might be arrange with the direction and writing-mode properties. This is the 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 wrong way, from proper to left, and all the things else adjustments accordingly.

That’s a (Flex) Wrap!

This tutorial was the second a part of my flexbox sequence. Be sure to learn the primary half about flexbox alignment, to discover ways to align flex objects 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