align-self property controls how the flex-item is aligned on the cross axis. This property will override the parent container’s alignt-items property’s value. align-self property will be ignored if the flex-item has an auto margin set on the cross axis.

Flex align self

.flex-container {
	display: flex;
.flex-item-1 { align-self: flex-start;}
.flex-item-2 { align-self: flex-end;}
.flex-item-3 { align-self: center;}
.flex-item-4 { align-self: baseline;}
.flex-item-5 { align-self: stretch;}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.