The align-items property in Flexbox is used to align the flexible items along the cross axis of the Flex container. This property is especially useful for controlling the vertical alignment of elements when the main axis is horizontal (and vice versa).

Values of align-items

1. stretch (default): The items stretch to fill the container along the cross axis.
2. flex-start: The items align at the start of the cross axis.
3. flex-end: The items align at the end of the cross axis.
4. center: The items are centered along the cross axis.
5. baseline: The items align according to their text baseline.

Usage of align-items

The align-items property is applied to the Flex container to control the alignment of its child elements along the cross axis. Here are examples of how you can use each of these values.

align-items: stretch

css

html

[Placeholder: Image showing the flex items stretching to fill the container along the cross axis, ignoring their heights]

align-items: flex-start

css

html

[Placeholder: Image showing the flex items aligned at the start of the container along the cross axis]

align-items: flex-end

css

html

[Placeholder: Image showing the flex items aligned at the end of the container along the cross axis]

align-items: center

css

html

[Placeholder: Image showing the flex items centered along the cross axis in the container]

align-items: baseline

css

html

[Placeholder: Image showing the flex items aligned according to their text baseline along the cross axis]

Complete Example

This example demonstrates how the align-items property affects the alignment of flexible items within a container.

html

[Placeholder: Image showing the complete example with align-items: center applied, vertically centering the items in the container]

Summary

• stretch: The items stretch to fill the container along the cross axis.
• flex-start: The items align at the start of the cross axis.
• flex-end: The items align at the end of the cross axis.
• center: The items are centered along the cross axis.
• baseline: The items align according to their text baseline.

Proper use of align-items will allow you to control the alignment of flexible items within a container, creating visually appealing and well-aligned layouts along the cross axis.