What is a usecase where you use flex-order in CSS?

Question

I'm learning basic web dev, and I've gotten to CSS flexbox. In the Mozilla introduction to flexbox, they introduce flex-order. I understand what it is and how it works, but I don't understand why you'd ever use it. All I can imagine is a possible dynamic layout where using JS you change the order of things.

What advantage is there to using flex-order over simply reordering your HTML tree? Wouldn't changing the visual order of things mess up users that rely on screen readers or other accessibility tools?

I can't find anything that explains a use case for this - I can only find things that explain what it does - so any clarification would be appreciated!

Thanks in advance :)

Responsiveness. When you want different layout orders for desktop and mobile screen sizes. — Alohci, Jun 27 '21 at 19:51
The target question is one example of why you would want to use the `order` property (there is no such property as `flex-order`. — TylerH, Jun 28 '21 at 15:57

Tushar Shahi · Answer 1 · 2021-06-27T18:55:08.410

MDN docs have mentioned one use case. It has to do with accessibility.

Visually challenged people use software like screen readers(Voice overs) to navigate through websites.

Say a screen reader goes through a modal dialog that pops up on the screen. Headings and subheadings are the most important items and basically act as the title. The close button(x) would be at the top right(in a lot of cases). If the source code and CSS follow the same order, something like close button will be read(said out) first by the Screen Reader. But that is not the primary item of the modal. A sighted user's focus will immediately go to the heading but a non-sighted user will have to rely on the screen reader and would hear close button first.

In such cases it makes sense that the CSS order and source code order of elements be different. order can help there.

In the code heading stays above the close button but visually the button will be before the heading.

score 0 · Accepted Answer · answered Jun 27 '21 at 18:10

flex-order is used to give order to the Childs under flex container.

    <div class="box">
        <div><a href="#">1</a></div>
        <div><a href="#">2</a></div>
        <div><a href="#">3</a></div>
        <div><a href="#">4</a></div>
        <div><a href="#">5</a></div>
    </div>

CSS

        .box {
          display: flex;
          flex-direction: row;
        }
        .box :nth-child(1) { order: 2; }
        .box :nth-child(2) { order: 3; }
        .box :nth-child(3) { order: 1; }
        .box :nth-child(4) { order: 3; }
        .box :nth-child(5) { order: 1; }

This code will arrange the child in specified order under a row! i.e., 1st child will have at 2nd position 2nd child will be at 3rd position

Note:- Indexing will be from 0.

Yes, I understand this. What I don't understand is how this is better than writing your HTML in that order: ```HTML

3

5

1

2

4

``` — William, Jun 27 '21 at 18:12
Flexbox gives us many cool features that enables to do more difficult stuffs in easy manner! This feature can be applied when you are working on some projects and want's to add some effects (eg- transition effects) on the child then we can add it to all the child easily! — Uttam, Jun 27 '21 at 18:16

What is a usecase where you use flex-order in CSS?

2 Answers2