The third property that affects the container is called "align-items". This is similar to the "justify-content" property we saw earlier, but the alignment is with respect to the cross axis.

The values ​​that we can assign to the "align-items" property are:

• stretch
• flex-start
• flex-end
• center
• baseline

To understand how the items are distributed in the container, we can execute this JavaScript program that dynamically modifies the "align-item" property:

The default value that stores the "align-items" property is "stretch" (stretch means to stretch, that is, the item occupies all the possible space that the container allows on the secondary axis)

The other possible values ​​can be tested by modifying the "align-items" property, and they can be:

• stretch Items take up the full height or width, depending on the value of the "flex-direction" property.
• flex-start Items are placed at the top or left of the container, depending on the value of the "flex-direction" property.
• flex-end Items are placed at the bottom or right of the container, depending on the value of the "flex-direction" property.
• center Items appear centered with respect to the transverse axis.
• baseline The items are aligned with respect to the transverse axis of the container taking into account the baselines of each item, this is defined based on the text of the items.