Welcome to the Flex Box Adventure!

Your goal is to help the Knight, Mage and Rouge defeat waves of monsters using CSS flex box property.

At each level, you need to solve one problem using flex box. When you figure out the solution type your answer in the text editor (you can find it in the top right corner) If the answer is correct, you will see a pop-up window with a link to the next level. If you typed the answer and the popup doesn't appear, you solved the problem incorrectly. Try another solution.

If have some questions, DM me on Twitter at @nickbulljs

Level 1

Level 1 of 24

Current stats:

50/100

Guide our Knight and help him to refill his health levels with apple by using justify-content property.

justify-content defines how the browser distributes space between and around items horizontally. It has many values but widely used only 6:

  • center align items at the center of the container.

    1
  • flex-start (default) align items at the start of the container.

    1
  • flex-end align items at the end of the container.

    1
  • space-between the first and last item will be flush with the ends of the container and all of the space shared equally between the items.

    1
    2
  • space-around align items evenly. Items have a half-size space on either end.

    1
    2
  • space-evenly align items evenly. Items have equal space around them.

    1
    2
1
2
3
4
5
6
7
8
#field {
    display: flex;
}