0

I'm training with Flexbox layouts on this website http://flexboxfroggy.com/. 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 ?

Chilipote
  • 1,037
  • 1
  • 8
  • 30
  • 1
    Please add an example of your code here not just images or offsite links, it will be easy to put the same code here on the snippets – DaniP Mar 23 '17 at 14:41

1 Answers1

2

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: https://stackoverflow.com/a/36118012/3597276

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701