flex-flow shorthand flex shorthand

flex-flow combinesflex-direction + flex-wrap. flex combines grow + shrink + basis.

flex-flow: row wrap

A

B

C

D

E

flex-flow: row-reverse wrap

A

B

C

D

E

flex-flow: column nowrap

A

B

C

flex-flow: column-reverse wrap

A

B

C

D

flex: 1 / flex: 2 / flex: 3 — proportional

flex:1

flex:2

flex:3

flex: auto vs flex: none vs flex: 0 0 200px

auto (grows)

none (fixed)

0 0 200px