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 Unused CSS Stages Flexbox and Multi-Column Layout Flexbox: Part 2

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
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.

Craig Watson
Craig Watson
27,930 Points

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

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
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.

Craig Watson
Craig Watson
27,930 Points

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

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
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
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

order:-2

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

order:2

Lady Do While
Lady Do While
6,027 Points
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.