Learn
Flexbox
align-items

In the previous exercise, you learned how to justify the content of a flex container from left to right across the page. It is also possible to align flex items vertically within the container. The align-items property makes it possible to space flex items vertically.

.container { align-items: baseline; }

In the example above, the align-items property is set to baseline. This means that the baseline of the content of each item will be aligned.

There are five values we can use for the align-items property:

  1. flex-start — all elements will be positioned at the top of the parent container.
  2. flex-end — all elements will be positioned at the bottom of the parent container.
  3. center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
  4. baseline — the bottom of the content of all items will be aligned with each other.
  5. stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

These five values tell the elements how to behave along the cross axis of the parent container. In these examples, the cross axis stretches from top to bottom of the container. We’ll learn more about this in a future exercise.

You might be unfamiliar with the min-height and max-height properties, but you have used height and width before. min-height, max-height, min-width, and max-width are properties that ensure an element is at least a certain size or at most a certain size. You’ll see how these become useful as you move throughout this lesson.

Now you’re going to see each of the five values above in action!

Instructions

1.

Assign the div with the id #flexstart an align-items value of flex-start.

2.

Assign the div with the id #flexend an align-items value of flex-end.

3.

Assign the div with the id #center an align-items value of center.

4.

Assign the div with the id #baseline an align-items value of baseline. How does the behavior of these elements differ from those in other divs?

5.

Change the height property of the .left, .right, and .center divs to be min-height and pay close attention to what happens to the #stretch div.

Folder Icon

Take this course for free

Already have an account?