Oh no! The frogs are all squeezed onto a single row of lilypads. Spread them out using the flex-wrap property, which accepts the following values:
nowrap: Every item is fit to a single line.wrap: Items wrap around to additional lines.wrap-reverse: Items wrap around to additional lines in reverse.
The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space.
For example, you can use flex-flow: row wrap to set rows and wrap them.
Try using flex-flow to repeat the previous level.
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.