Skip to main content

Justify Content — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Justify Content lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Centre along the main axis

    easy10 min

    Centre the items horizontally.

  2. 2

    Push items apart

    easy10 min

    Use space-between.

  3. 3

    Even spacing around

    easy10 min

    Use space-around.

  4. 4

    Align to the end

    easy10 min

    Push all items to the end of the row.

  5. 5

    Distribute evenly

    medium10 min

    Use space-evenly so all gaps are equal.

Find the bug(5)

  1. 1

    Fix align-items used for the main axis

    easy8 min

    Horizontal alignment in a row uses justify-content.

  2. 2

    Fix the misspelled value

    easy8 min

    The value is space-between, not space-beetwen.

  3. 3

    Fix the missing hyphen

    easy8 min

    The value needs a hyphen: flex-end.

  4. 4

    Fix the property on the items

    easy8 min

    justify-content belongs on the container.

  5. 5

    Fix the wrong property name

    easy8 min

    The property is justify-content, not justify.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace