CSS3 - Flexbox - Aligning items
Aligning items along the main-axis with justify-content
justify-content sets how flex-items are to be aligned along the main-axis (which is left to right in these examples)
All this also works with flipped axes. Here is just one example:
Aligning items along the cross-axis with align-items
align-items sets how flex-items are to be aligned along the cross-axis (which is top to bottom in these examples)
Which is exactly how you vertically align items with flexbox…
This aligns items so that the baseline of the contained texts are on one line.
Aligning individual items with align-self
align-self is set on flex-items and overrides the align-content property that has been set on the flexbox.
In the above example, only box3 is aligned by align-items. All other boxes override this property by setting align-self.
Align-content = justify-content for the cross-axis.
align-content has the same effect as
justify-content, but for the cross-axis instead of the main-axis.
This will only have an effect if there is any wrapping, so
flex-wrap:wrap(-reverse) needs to be set.