The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:
flex-start: Lines are packed at the top of the container.flex-end: Lines are packed at the bottom of the container.center: Lines are packed at the vertical center of the container.space-between: Lines display with equal spacing between them.space-around: Lines display with equal spacing around them.stretch: Lines are stretched to fit the container.
This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.