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
Then I apply the order:1; property to the yellow frogs.
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 ?
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
Here's a detailed explanation of the
order property: http://stackoverflow.com/a/36118012/3597276