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

0

Issue

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 🙂

Solution

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.

Answered By – Uttam

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More