These are examples of the 'justify-content' property.

These friends want to be on the left side of the screen.

These friends want to be on the right side of the screen.

These friends want to be in the center of the screen.

These strangers want space between them.

These strangers want space around them.

These strangers want to be spaced evenly.

These are examples of the 'flex-direction' property.

I want my ducks in a row.

Let's stack these cups! We need to put the images into a column.

I want this to be a row that says "3, 2, 1"!

1

2

3

I want this to be a column that says "3, 2, 1"!

1

2

3

This will illustrate the 'order' property.

I want the circles to be in this order: Aqua, Green, Red

Let's practice the 'align-items' property.

I want to move the kittens to the top of the box.

I want to move the kittens to the bottom of the box.

I want to move the kittens to the center of the box.

Now we'll practice the 'flex-wrap' property.

These rectangles are wrapped but I don't want them to be.

1

2

3

4

5

I actually do want these rectangles to be wrapped.

1

2

3

4

5

I want these rectangles to be wrapped in reverse.

1

2

3

4

5

Lastly, we'll practice the 'align-content' property.

I want these rectangles to be at the top of their container.

I want these rectangles to be at the bottom of their container.

I want these rectangles to be in the center of their container.

I want the rectangles to have space between them.

I want the rectangles to have space around them.

Now you know the basics of flexbox!! Check out this fun game for more experience: Flexbox Froggy