Using the align-items property

The align-items property (align-items) is used to specify the alignment of elements on the cross-axis. In this example, the flex-direction property has been set to column, and hence the property aligns elements with respect to rows.

Here are some of the possible values:

• flex-start pushes all elements to the beginning
• center pushes all elements to the centre
• stretch (default) stretches elements to fit
• flex-end pushes all elements to the end