Example7
flex: <grow> <shrink> <basis>;
A
B
C
D
Notes:
- Both B and C children wants to be 35px but since the container is not big enough, shrink properties will be applied
- Container width is 80px
- A and D child have flex-shrink to the default value: 1
- In this case A and D cannot be shrinked more so they shrink value is not included in the calculations. They width is 16px
- B child flex-shrink value is 1
- C child flex-shrink value is 10
Formula (kind of):
16 + 35 + 35 + 16 → 102 (total unshrinked width)
102 - 80 → 22 (space that needs shrink)
22 / (1 + 10) → 2 (absolute flex-shrink value in pixels)
Hence:
A → 16
B → 35 - (1 * 2) → 32
C → 35 - (10 * 2) → 15
D → 16
Example1
flex-direction: column;
AA
BB
CC
DD
Example2
justify-content: space-between;
AD
BB
CC
DD
Example3 justify-content: space-around;
AA
BB
CC
DD
Example4
align-items: center;
AA
BB
CC
DD
Example5
order: n;
AA
BB
CC
DD
Example6
flex-grow: n;
AA
BB
CC
DD