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 CSS Flexbox Layout Flexbox Properties Changing the Order of Flex Items

Jared Armes
PLUS
Jared Armes
Courses Plus Student 6,391 Points

Would it make sense for the sake of simplicity to create an "order" property for each item within a flex container?

I understand that I could just type "-1" or "-2" to move items around. But wouldn't it be more logical to assign each item an order of "1" then "2" then "3" beforehand, to keep things from getting confusing in the future if any changes are necessary? I want to know if this is something that professional developers would do for continuity purposes.

Is there a reason you wouldn't assign an order right away (other than the fact that it simply takes a little longer to type it out)?

2 Answers

Adam Hill
Adam Hill
7,492 Points

It also depends how often you think you might want to reorder items, if it'll be often and you're likely to reorder multiple items then having an order applied like Jennifer suggested is a good idea.

If you're not going to re-order them very often (for example a grid of products) then for speed there's no need to tag all items with individual classes/orders, just set the order on all to 1 and then add order:0 with a class of 'featured' etc to bring an item to the start of the list.

Jared Armes
Jared Armes
Courses Plus Student 6,391 Points

Ah, ok. That makes sense then. That was the type of answer I was looking for, thanks.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

In my opinion, it might be best to give them an order in the double digits to start with. For example 10, 20, and 30. That way if you have a fourth or fifth element that you add but you want them to go in between the first and second and the second and third you could set their orders to 15 and 25 respectively. This, in my opinion, would give you a little "room to grow" so to speak.

Jared Armes
Jared Armes
Courses Plus Student 6,391 Points

That is actually a great idea. At first, I was going to respond by saying: "Why not just use '.5' to differentiate the items in that case?". But I tested it beforehand, and it seems to default to 0 when assigning a value with a decimal point.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm fairly sure it has to be an integer (whole number, counting number, whatever you prefer to call them) :)

Hi Jennifer Nordell, so you mean those in between 10, 20, you will consider as a sub-element in the markup?

Say:

<div class="container1"> <!-- order: 10 -->
        <div class="item-1 item">Item 1</div>   <!-- order: 11 -->
        <div class="item-2 item">Item 2</div>  <!-- order: 12 -->
        <div class="item-3 item">Item 3</div>  <!-- order: 13 -->
    </div>

<div class="container2"> <!-- order: 20 -->
        <div class="item-4 item">Item 4</div>  <!-- order: 21 -->
        <div class="item-5 item">Item 5</div> <!-- order: 21 -->
        <div class="item-6 item">Item 6</div> <!-- order: 23 -->
    </div>

This is good practice?