align-self
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-container {
display: flex;
align-content:center;
}
.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;}