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 propertyA property used to indicate the direction of elements in a flexible box layout, with values such as row, row-reverse, column, and column-reverse. 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

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p {
    text-aligncenter;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX