CSS align-self property

Description

CSS align-self property aligns an element vertically (along cross/block/column axis) within its container by adjusting the margins.

axes

We are using a flex container as an example.

Syntax

align-self : auto | baseline | center | stretch | flex-start | flex-end

Property values

autoDefault

It stretches out the element vertically to fill the height of container completely.

align-self: auto;

baseline

It aligns the element on its own baseline.

align-self: baseline;

center

It aligns an element at the middle of cotainer.

align-self: center;

stretch

It stretches the element so as fill the height of the container completely.

align-self: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

align-self: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

align-self: flex-end;

Applicable to

It applies to flex items, grid items, and absolutely positioned elements.

#CSS digger
Was this article helpful?

 
arrow

Self element

×

Ctrl+D