Just as you can control the distribution of elements along the main axis using the justify-content property, you can control the alignment of elements along the cross axis. The alignment property is named align-items. The options for alignment are easier to understand if there's extra space in the parent. Consider this horizontal parent whose children are aligned at the start of the cross axis:
Try setting align-items to these other possible values:
flex-endcenterstretchThe default value is stretch, but you are encouraged to explicitly set the value.
Sometimes you will want to align text elements, but the text may have may not be uniform in size or face. Aligning at the start of the cross axis doesn't produce the expected result:
In these situations, you can align the baselines of the text. A baseline is what typographers call the imaginary line on which all letters sit. Try setting align-items to baseline.