Welcome to Flexbox Froggy, a game where you help Froggy and friends
by writing CSS code! Guide this frog to the lilypad on the right by
using the
justify-content
property, which aligns items horizontally and accepts the following
values:
-
flex-start: Items align to the left side of the container. -
flex-end: Items align to the right side of the container. -
center: Items align at the center of the container. -
space-between: Items display with equal spacing between them. -
space-around: Items display with equal spacing around them.
For example,
justify-content: flex-end;
will move the frog to the right.
Aligns flex items along the main axis.
flex-start (default)
flex-end
center
space-between
space-around
space-evenly
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#pond {
display: flex;
}