align-items - CSS

The align-items CSS property is used to set the vertical alignment of the items inside a flexbox container. It defines how the flex items are aligned when they are not stretched to fill the flex container.

Syntax

flex-start | flex-end | center | stretch | baseline | first baseline | last baseline | safe center | unsafe center

• flex-start: aligns items at the beginning of the container
• flex-end: aligns items at the end of the container
• center: aligns items at the center of the container
• stretch: stretches the items to fill the container
• baseline: aligns the items along the baseline of their content
• first baseline: aligns the first line of each item along the baseline of their content
• last baseline: aligns the last line of each item along the baseline of their content
• safe center: centers items in the container within the "safe" area of the container. This is area is defined as the smaller "viewing area" of the container in certain conditions, such as when the container is smaller than the viewport.
• unsafe center: centers items in the container regardless of the "safe" area of the container.

Example

.container {
  display: flex;
  align-items: center; /* Center align the items */
  height: 300px;
}

.item {
  background-color: #ddd;
  margin: 10px;
  height: 50px;
  width: 50px;
}

The code above centers the flex items inside the container, both horizontally and vertically, with a height of 300px.

Conclusion

The align-items property is a powerful tool for controlling the vertical alignment of the items inside a flex container. Use it to create more flexible and responsive layouts in your web design projects.