align-self

Align content The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. flex-start; Lines are packed toward the start of the flex container. flex-end; Lines are packed toward the end of the flex container. center; Lines are packed toward the center of the flex container. space-between; Lines are evenly distributed in the flex container. space-around; Lines are evenly distributed in the flex container, with half-size spaces on either end. stretch; Lines stretch to take up the remaining space.

align-self

Remember our align-items property where we can set the flex item along the cross axis. The thing with align-items is that it forces ALL of the flex items to play with the rules. But what if you want one of them to break the rule. you can use align-self. This property accepts all of the same values given to align-items, so you can easily break from the pack .

.child-1 {
  align-self: stretch /* default */
           or flex-start
           or flex-end
           or center
           or baseline
}

Align self The align-self property of flex items overrides the flex container's align-items property for that object. flex-start, Items are positioned at the top of the container. flex-end, Items are positioned at the bottom of the container. center, Items are positioned at the center of the container (vertically). stretch, Items are stretched to fit the container. auto, Use the default alignment of the flex container.