Flexbox Demo

Flexbox Demo #1

flex-grow: 1

flex-grow: 1

flex-grow: 1

flex-grow: 1

flex-grow: 1

Flexbox Demo #2 space around

Flexbox Demo #3 space evenly

Flexbox Demo #4 space between

Flexbox Demo #5 flex direction (row-reverse)

1

2

3

4

5

Flexbox Demo #6 flex wrap (flex-wrap warp)

flexgrow: 1

flexgrow: 1

flexgrow: 1

flexgrow: 1

flexgrow: 1

Flexbox Demo #7

flex-basis

Flexbox Demo #8 flex basis

flex-basis 25%

flex-basis 25%

flex-basis 25%

flex-basis 25%

flex-basis 25%

flex-basis 25%

flex-basis 25%

flex-basis 25%

Back to CIS195 Portfolio