CSS align-items property
CSS align-items property controls the alignment of the child items vertically (along cross/block/column axis).
We are using a flex as a container to explain this property.
align-items : normal | baseline | center | stretch | flex-start | flex-end
It stretches out the child elements so as to fill the height of the container completely.
It aligns multiple objects (elements) on the normal baseline such as you usually see the placement of elements ontheir own baseline.
It aligns the items (elements) in the middle of the container.
It stretches out all of the objects (elements) in such a way that they occupy the full height of the container.
flex-start aligns the content items at the start of flex container.
flex-end aligns the content items at the end of the flex container.
It applies to multicol containers, flex containers, and grid containers.
Was this article helpful?