In this section, we will learn what the align-self property is and how to use it in CSS.

Click here to run the first example.

Click here to run the second example.

CSS align-self Property Definition and Usage

By default, if the height of a flex-item wasn’t explicitly set, it will stretch along Cross-Axis of the Flex-container and fill the entire space of its flex-line.

But CSS provided a property named `align-self` by which we can control the positioning of individual flex-items along the Cross-Axis, as well.

CSS align-self Property Syntax

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

CSS align-self Property Value

The values we can set for `align-self` property are:

• auto: this is the default value and it will follow the value set for `align-items` property.
• flex-start: using this value, the target flex-item will be positioned as close as its flex-line allows for the start-point of the container’s Cross Axis.
• flex-end: using this value, the target flex-item will be positioned as close as its flex-line allows for the end-point of the container’s Cross Axis.
• center: using this value, the target flex-item will be positioned on the center of its flex-line.
• baseline: using this value, the target flex-item will be positioned in a way that its baseline aligns with other participant flex-items within related flex-line.
• stretch: using this value, it makes the target flex-item to stretch along Cross-Axis of the container.

Example: flexbox align self

See the Pen flexbox align self by Enjoy Tutorials (@enjoytutorials) on CodePen.