Property: flex
Default: flex: 0 1 auto
(grow, shrink, basis)
1
flex: 0 1 auto
2
flex: 0 1 auto
3
flex: 0 1 auto
4
flex: 0 1 auto
flex: 1
is the same as flex: 1 1 0%
1
flex: 1
2
flex: 1
3
flex: 1
4
flex: 1
5
flex: 1
6
flex: 1
7
flex: 1
8
flex: 1
Flex items stick to 25% width (works due to flex-wrap: nowrap
, thus only for one row)
1
flex: 1 1 25%
2
flex: 1 1 25%
3
flex: 1 1 25%
4
flex: 1 1 25%
Example from flex-basis
section, now combined with other properties
1
flex: 0 1 25%
2
flex: 1 1 auto
3
flex: 1 1 auto
4
flex: 0 1 50%