Tests flex-wrap, flex-grow, flex-shrink and flex-basis.
flex-wrap: wrap (8 items in a 300px container)
1
2
3
4
5
6
7
8
flex-grow: items grow to fill space (ratios 1:2:1)
grow:1
grow:2
grow:1
flex-shrink: items shrink (middle item shrinks less)
shrink:1
shrink:3
shrink:1
flex-basis: fixed starting size before grow/shrink
basis:100
basis:200
basis:50
Back to index