Flexbox Demo

1) display:flex + `flex-grow: 1`

grow:1

grow:1

grow:1

2) justify-content: `space-around`

A

B

C

3) justify-content: `space-evenly`

A

B

C

4) align-items: `center`

centered

centered

centered

5) flex-direction: `row-reverse`

1

2

3

4

5

6) flex-wrap: `wrap` (min-width forces wrapping)

box

box

box

box

box

7) flex-flow: `row wrap` + gap

chip

chip

chip

chip

chip

chip

8) Items: `flex-basis`, `flex`, `align-self`, `order`

flex: 0 1 30%

align-self:center
order:-1

flex: 0 1 30%

flex: 0 1 30%

flex: 0 1 30%