CHILDREN FLEX ITEM PROPERTY

FLEX

1
2
3
4
5

flex: 0 1 auto | 0 auto; // Default

1
2
3
4
5

flex: 1 1 auto | auto

1
2
3
4
5

flex: none | 0 0 auto

1

flex: 2;

// flex-grow only

2

flex: 5%;

// flex-basis only

3

flex: 1.5 0px;

// flex-grow and flex-basis

4

flex: 1 2;

// flex-grow and flex-shrink

5

flex: 3 2 200px;

// All three values

Flex items with varying flex values