align-content controls the alignment of flex items along the cross axis It applies to the container itself and not on individual items values → start, center, end, flex-start, flex-end, baseline... ...space-between, space-around, space-evenly, stretch... ... safe center and unsafe center align-content: stretch; → default value, fills the container along the cross axis align-content: flex-start; → to the cross-axis start side align-content: center; → close to each other in the center of the container
b - align-self property
align-self sets individually the alignment of a flex item along the cross axis values → start, center, end, flex-start, flex-end, anchor-center baseline... ...space-between, space-around, space-evenly, stretch... ... safe center and unsafe center align-self: stretch; → Stretch 'auto'-sized items to fit the container align-self: flex-end; → Put the flex item at the end align-self: center; → Puts the item around the center align-self: baseline; →aligns to the alignment baseline