Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

Courses Plus Student 8,447 Points

why a value of -1 instead of just 1?

Guil Hernandez to re order the columns why did you use a value of -1 instead of 1. I mean it would seem if you wanted something first the logical choice would be to type 1, but you typed -1, why? Can you explain the reason why 1 wouldn't produced the desired result? FYI I did try writing 1 and it did nothing. For all the other examples you used positive numbers, this was the first negative value. I'm a newb so these things confuses me. Thanks.

Hi Samuel,

FlexBox's default ordering is source order of the child elements from 1, so for example below:

<div id="item-1"></div> <!-- first in list -->
<div id="item-2"></div> <!-- second in list -->
<div id="item-3"></div> <!-- third in list -->
<div id="item-4"></div> <!-- fourth in list -->

with flexbox if you simply wanted "Item 2" to be first in the list you can do the following :

#item-2 {
  order: -1;

Thus overriding the default and putting "item-2" first in the list with minimal code.

This link is great I find myself referring to this a lot for flexbox its well worth a read!

Hope this helps! Craig

3 Answers

Courses Plus Student 8,447 Points

Hi Craig Watson thanks for the quick reply. I will be honest with you, I think I was more confused after reading your answer. But it's not your fault I realized it's my understanding of the flexbox that is the problem so I'm going to read up on the link you sent me. It's a very very helpful link man. Thanks a bunch for sharing man. Thanks for the link and for you reply. Seriously I'm new to this so this takes a while for me to comprehend. Thanks again.

No problem Samuel,

Apologies for causing any confusion, I have had a read over my answer and it was quite brief to say the least.

FlexBox is still very new and requires lots of prefixing for it to be suitable across all browsers, however this is improving and I expect to see this really take off soon. It is well worth knowing for the future and the link I gave you covers everything you'll need to know about it.

Best of luck with your course's Craig

Courses Plus Student 8,447 Points

Thanks again Craig Watson I've started reading up on the link you sent me and I'm figuring out a lot of stuff huge help dude. Thanks.

Andres Aguero
Andres Aguero
30,545 Points

The reason you type -1 is to change the order of the column block he was specifying. If he wanted it so that the column block was moved 2 columns back then he would put


If he wanted it so that the column was moved 2 columns after then he would put


Lady Do While
Lady Do While
6,027 Points

I found this link to be the most helpful. Here you can play around with the order.

Basically, the default for all the blocks is 0, and so, all things being equal, the boxes render in the source code order. By giving col-3 a negative value Guil basically says, "this number is further left on the number line, so this box needs to be the furthest left." He could have just as easily put any negative number to put it first.

Conversely, if out of three columns you wanted the first column to be displayed last, since all the columns by default are given the value "0", you can just give col-1 a value of "1" making it further right on the number line.

To directly answer you question, giving col-3 a value of "1" makes it last, which it already is, which is why you don't see any change on the page.