The align-self Property

The "align-self: flex-start;" aligns the selected flex item at the top of the container.

The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.

1
2
3
4

The align-self property overrides the align-items property of the container.

I added overflow: auto to the <div> container to enhance the look on screens smaller than 501px wide.