align-items

[oldoc63]

• 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; }

• 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).

[oldoc63]

• Assign the <div> element with id flexstart an align-items property with the value flex-start.

[oldoc63]

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

[oldoc63]

• Now, in the .left, .center, right ruleset, change the height property to min-height and observe what happens to these elements.