CSS align-self Property

The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc. 

Syntax:

align-self: auto|normal|self-start|self-end|stretch|center
 |baseline, first baseline, last baseline|flex-start
 |flex-end|baseline|safe|unsafe;

Property values:auto: This property is used to inherit its parent container align-items property or stretched if it has no parent container. It is a default value.

Syntax:

align-self: auto;

Example:

Output:

position👁 Image

stretch: This property is used to position the elements to fit the container.

Syntax:

align-self: stretch;

Example:

Output:

👁 Image

Center: This Property is used to place the item at the center of the flexible container.

Syntax:

align-self: center;

Example:

Output:

👁 Image

Syntax:

align-self: flex-start;

Example:

Output:

👁 Image

flex-end: This Property is used to position the selected item at the end of the flexible container.

Syntax:

align-self: flex-end;

Example:

Output:

👁 Image

Baseline: The item is placed at the baseline of the flexible container.

Syntax:

align-self: baseline;

Example:

Output:

👁 Image

initial: It sets the property to its normal position. It is the default value.

Syntax:

align-self: initial;

Example:

Output:

👁 Image

Supported browsers: The browser supported by CSS | align-self Property are listed below: 

• Google Chrome
• Edge
• Firefox  
• Opera
• Safari