CSS align-self property
CSS align-self property aligns an element vertically (along cross/block/column axis) within its container by adjusting the margins.
We are using a flex container as an example.
align-self : auto | baseline | center | stretch | flex-start | flex-end
It stretches out the element vertically to fill the height of container completely.
It aligns the element on its own baseline.
It aligns an element at the middle of cotainer.
It stretches the element so as fill the height of the container completely.
flex-start aligns the current element at the start of flex container.
flex-end aligns the current element at the end of the flex container.
It applies to flex items, grid items, and absolutely positioned elements.
Was this article helpful?