◀ Level 1 of 24 ▾ ▶
123456789101112131415161718192021222324
Reset

Flexbox Froggy

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;

}

Tweet Follow @playcodepip

Flexbox Froggy is created by Codepip • GitHub • Twitter • English English Español Français Deutsch Nederlands Português Italiano Svenska Polski Česky Magyar Română Български Lietuvių Українська Русский Српски Македонски Ελληνικά Türkçe فارسی हिंदी தமிழ் മലയാളം 简体中文 繁體中文 日本語 한국어 Tiếng Việt Esperanto Color Assist
Want to learn CSS grid? Play Grid Garden.