CSS Flexbox

Cross axis alignment

We can specify the alignment our flexible elements along the cross-axis with the align-items property.

stretch is the default value and stretches the elements to fill the container while still respecting minimum/maximum widths and heights.

start packs elements together toward the start edge of the cross axis of the alignment container.

end packs elements together toward the end edge of the cross axis of the alignment container.

center packs elements together toward the center of the cross axis of the alignment container.

Interactive playground

Try out different values of align-items by clicking on the options below. Notice how easy it is to both vertically and horizontally center something when justify-content is also added to the mix.