Learn

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.

Below are five commonly used values for the align-items property:

  • flex-start — all elements will be positioned at the top of the parent container.
  • flex-end — all elements will be positioned at the bottom of the parent container.
  • center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
  • baseline — the bottom of the content of all items will be aligned with each other.
  • 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> element with id flexstart an align-items property with the value flex-start.

2.

Assign the <div> element with id flexend an align-items property with the value flex-end.

3.

Assign the <div> element with id center an align-items property with the value center.

4.

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

5.

Take a look at the elements under “Stretch” at the bottom of the page. Now, in the .left, .center, right ruleset, change the height property to min-height and observe what happens to these elements.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?