Filling the space: cross-axis

Previously, we allowed the box to take its natural height. Now we will make it taller so we can see the effect of the align-items property.

Use the developer tools to inspect the box above. Change the align-items property to flex-start (the default is stretch). What happens to the items? Try flex-end and center. How does baseline affect the image? Notice that the image maintains its aspect ratio in all cases: except when stretch is used, it can even overflow the box. (Try adding overflow: hidden to the box.) baseline can cause the other items to overflow.

You can also use the align-self property to override the align-items property for a specific item. This is useful when you want to align a specific item to the top, bottom, or center of the container. Experiment with this. Compare it to what you can do with margin-?: auto as discussed in a previous section.

Interesting effects can be created by using the align-self in combination with the justify-content property. justify-self is also available.