Chilipote Chilipote -4 years ago 183
CSS Question

Order property in flexbox layouts

I'm training with Flexbox layouts on this website There is a thing I don't understand with the order property :

Imagine I have already this

enter image description here

Then I apply the order:1; property to the yellow frogs.

enter image description here

Why those two little are going on the right together ? I wouldn't have expected that behaviour. I thought they would moved forward one step on the right, but not like that ?

Could someone explain to me ?

Answer Source

The initial value of the order property is 0 for all flex items.

When you apply order: 1 to items, it moves them ahead all of the others.

As evident from the code in the images, the two yellow frogs were originally located in the empty green circles on the top row. That was their initial location. Then align-self: flex-end shifted them to the bottom of the container.

If we forget about align-self: flex-end for a second, order: 1 would move those frogs to the end of the top row. Now bring back align-self: flex-end.

Here's a detailed explanation of the order property:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download