Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Lars Jensen
Lars Jensen
13,402 Points
Posted by Lars Jensen
Lars Jensen
13,402 Points

"order property" in flex box behaving strangely!

Hi guys,

I've fallen in love with the flex box model as it is so easy and flexible to use. However, I've stumpled a very weird issue concerning the "order property: Let's say that I'm having 4 divs(a,b,c,d) the order of which I want to rearrange in using the order-property. Now I wanted the 2nd and the 3rd div to simply swap their position. I was expecting to accomplish that by typing:

div:nth-of-type(2) {order:3;} div:nth-of-type(3) {order:2;}

So that a, b, c, d turns into a,c,b,d. Surprisingy, I get the result: a, d, c, b !?!? It turned out, that any order value >=1 pushes the selected element to the very end, order=0 leaves the element in the current position and order<=0 puts the element intothe first position. That's not the way it is supposed to work according to the documentation! What am I doing wrong? How can I make it work the way I've outlined above?

Here is the code:

html:

<div class="container"> <p class="item">a</p> <p class="item">b</p> <p class="item">c</p> <p class="item">d</p>
</div>

CSS:

.container {width:100%; display:flex; flex-wrap:wrap; flex-direction:row;}

.item { min-width:200px; height:50px; background:red; border:1px dotted green;}

.item:nth-of-type(3) {order:2;}

.item:nth-of-type(2) {order:3;}

Lars Jensen
Lars Jensen
13,402 Points
Lars Jensen
Lars Jensen
13,402 Points

Sorry, here is the html markup: 

          <body>
               <div class="container">
                       <p class="item">a</p>
                       <p class="item">b</p>
                       <p class="item">c</p>
                        <p class="item">d</p> 
               </div>
         </body>


</html>

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Lars,

The initial value for the order property is 0. This means before you assign any order values yourself, a, b, c, and d all have order 0. This means they will appear in source code order.

When you assign b and c orders 3 and 2 respectively, a and d are still 0 putting them in front.

To get the order you want, you could either give a and c an order value of -1: (b and d remain their initial value of 0)

.item:nth-child(odd) {
  order: -1;
}

Or you could give b and d an order value of 1: (a and c remain their initial value of 0)

.item:nth-child(even) {
  order: 1;
}

I used nth-child here based on this particular markup. You may have to adjust based on changes to the markup.

You can read about the order property here: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Lars,

In order for the order property to work correctly it needs to be specified on all your flexbox elements as browsers can't assume the order based on one or two elements given the current spec.