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

Posted by Brian Polonia
Brian Polonia
25,139 Points

Having trouble with flexbox order property while practicing on codepen...

I'm on codepen practicing the things I learned in the flexbox tutorial and I am having a problem using the order property. I have a ul with the first li being a logo and the other 4 being random items. I am trying to move the logo from the first position into the third position but it isn't working. The code is as follows:

HTML:

<ul>
  <li id="logo"><div>Logo</div></li>
  <li><div>Item1</div></li>
  <li><div>Item2</div></li>
  <li><div>Item3</div></li>
  <li><div>Item4</div></li>
</ul>

CSS:

ul{
  display: -webkit-flex;
  -webkit-flex-direction:row;
  -webkit-justify-content:space-around;

  list-style:none;
  color:white;
  background:tomato;
  padding:10px;
}

#logo {
  -webkit-order:3;
 }

Can anyone tell me why it isn't working? Do I have the right or wrong idea on how the order property is supposed to work?

1 Answer

Chris Shaw
Chris Shaw
26,676 Points

Hi Brian,

Sadly the order property only works if all the child elements have an order set, for example you would need to do the following.

ul li:nth-child(2) { -webkit-order: 1; }
ul li:nth-child(3) { -webkit-order: 2; }
ul li:nth-child(4) { -webkit-order: 4; }
ul li:nth-child(5) { -webkit-order: 5; }

https://developer.mozilla.org/en-US/docs/Web/CSS/order

Brian Polonia
Brian Polonia
25,139 Points

Ohh, ok! I got it. Thank you!