Flexbox Froggy

Level 1 of 24 ▾
123456789101112131415161718192021222324
Reset

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.

1
2
3
4
5
6
7
8
9
10
#pond {
  display: flex;
}
Grid Garden Anchoreum Disarray CSS Scoops

Flexbox Froggy is created by Codepip • YouTube • Twitter • GitHub • Settings

Language

Difficulty

Colorblind Mode

Want to learn more CSS? Play Grid Garden or Anchoreum.