Here we will look at some things you can do with the "justify-content" property

These boxes are styled as flex-start

These boxes are styled as flex-end

These boxes are styled as center

These boxes are styled as space-between

These boxes are styled as space-around

These boxes are styled as space-evenly

Here we will look at some things you can do with the "flex-direction" property

These boxes are styled as row, the default

1
2
3

These boxes are styled as column

1
2
3

These boxes are styled as row-reverse

1
2
3

These boxes are styled as column-reverse

1
2
3

Let me show you how the "order" property works

Yellow

Blue

Red

I will apply the order property with a value of "1" to the red box so the boxes are in the correct order..

Here is the "align-items" property

These boxes are styled as flex-start

These boxes are styled as flex-end

These boxes are styled as center

These boxes are styled as stretch

You can also use the "align-self" property for specific elements within a container...

Box 1 is styled as flex-start, box 2 is flex-end, box 3 is center, and box 4 is stretch

1
2
3
4

Now let's check out the "flex-wrap" property

This is styled as nowrap

1
2
3
4
5

This is styled as wrap

1
2
3
4
5

This is styled as wrap-reverse

1
2
3
4
5

We'll finish by examining the "align-content" property

This is styled as flex-start

This is styled as flex-end

This is styled as center

This is styled as space-between

This is styled as space-around