align-self

Posted by Mukesh Singh on

Learn CSS and HTML at CodingGram

align-self

align-self  works like align-items, but applies only to a single flexbox item, instead of all of them.

align-self: auto;

The target will use the value of align-items.

See the Pen
CSS Property align-self:auto;
by Mukesh Singh (@codecad)
on CodePen.

align-self: flex-start;

If the container has align-items: center and the target has align-self: flex-start, only the target will be at the start of the cross axis.

By default, this means it will be aligned vertically at the top.

See the Pen
CSS Property align-self: flex-start;
by Mukesh Singh (@codecad)
on CodePen.

align-self: flex-end;

If the container has align-items: center and the target has align-self: flex-end, only the target will be at the end of the cross axis.

By default, this means it will be aligned vertically at the bottom.

See the Pen
CSS Property align-self:flex-end;
by Mukesh Singh (@codecad)
on CodePen.

align-self: center;

If the container has align-items: flex-start and the target has align-self: center, only the target will be at the center of the cross axis.

By default, this means it will be vertically centered.

See the Pen
CSS Property align-self:center;
by Mukesh Singh (@codecad)
on CodePen.

align-self: baseline;

If the container has align-items: center and the target has align-self: baseline, only the target will be at the baseline of the cross axis.

By default, this means it will be aligned along the basline of the text.

See the Pen
CSS Property align-self: baseline;
by Mukesh Singh (@codecad)
on CodePen.

align-self: stretch;

If the container has align-items: center and the target has align-self: stretch, only the target will stretch along the whole cross axis.

See the Pen
CSS Property align-self:stretch;
by Mukesh Singh (@codecad)
on CodePen.

Browser Support
Desktop

Chrome Firefox IE Edge Safari
21* 28 11 12 6.1*

Mobile

Android Chrome Android Firefox Android iOS Safari
87 83 4.4 7.0-7.1*