livinzlife livinzlife - 2 months ago 7
CSS Question

Applying order property to flex items in different containers

If I have existing html like:

<div class="flex">
<div class="row">
<div class="flex-item-1">stuff</div>
<div class="flex-item-3">stuff</div>
</div>
<div class="flex-item-2">stuff</div>
</div>


Is it possible to order those 1,2,3 as if the
row
div doesn't exist?

I tried:

.flex{display:flex;flex-direction: column;}
.flex-item-1{order:1;}
.flex-item-2{order:2;}
.flex-item-3{order:3;}


But since they aren't originally of the same parent/child nesting level (or even child container), this doesn't work.

Answer

With your current HTML structure, that is not possible.

The order property applies only to flex items that are siblings in the same flex container.

(And keep in mind that .row isn't even a flex container. So the children are not flex items.)

You can use order to re-arrange .row and .flex-item-2.

If you apply display: flex or inline-flex to .row, you can then use order to re-arrange .flex-item-1 and .flex-item-3.

But because they have different parents, the first two cannot be re-arranged with the latter two.

Comments