Module 5: Flexbox Property Demonstrations

Demo 1: display: flex & flex-grow

Grow 1

Grow 1

Grow 1

Demo 2: justify-content: space-around

A

B

C

Demo 3: justify-content: space-between & order

First Visually

Second Visually

Third Visually

Demo 4: justify-content: space-evenly & align-items: center

Tall

Short

Medium

Demo 5: flex-direction: column & align-self

Top

Center Aligned

Bottom

Demo 6: flex-wrap: wrap

1

2

3

4

5

6

7

8

Demo 7: flex-flow: row wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Demo 8: align-content & flex-basis / flex-shrink

A

B

C

D

E

F

G

H

I