align-items

Last Updated: March 29, 2022

This property is used to align the child elements along the cross-axis of the flex container.

This is like justify-content but now it is along the cross axis (perpendicular to the main axis)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

align-items:stretch This is the default value of this property and it will stretch to fill the entire container

align-items:flex-startItems are placed at the top edge of the container. So this vertical aligned to top of the container

align-items:flex-end Child items are placed at the bottom edge of the container. So this is vertically aligned to the bottom of the container.

align-items:center Items are centered in the cross-axis

align-items:baseline┬áThe baseline value will align flex items along their content’s baseline. When you look at the diagram above you can understand it clearly

Test