Skip to main content

Flex Wrap — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Flex Wrap 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

    Allow wrapping

    easy10 min

    Let flex items wrap onto new lines.

  2. 2

    Align wrapped lines to the start

    easy10 min

    Wrap the items and pull the lines to the start.

  3. 3

    Wrap in reverse

    easy10 min

    Use wrap-reverse.

  4. 4

    Use the flex-flow shorthand

    easy10 min

    Set direction and wrap in one declaration.

  5. 5

    Align wrapped lines

    medium10 min

    Wrap and centre the resulting lines.

Find the bug(5)

  1. 1

    Fix the misspelled property

    easy8 min

    The property is flex-wrap, not flexwrap.

  2. 2

    Fix the invalid value

    easy8 min

    "wrapped" is not valid, so no wrapping happens at all.

  3. 3

    Fix the incomplete shorthand

    easy8 min

    flex-flow only sets the direction, so the items never wrap.

  4. 4

    Fix align-items used for wrapped lines

    easy8 min

    Spacing between wrapped lines uses align-content.

  5. 5

    Fix the wrap set on the items

    easy8 min

    flex-wrap belongs on the container.

Ready to write the code?

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

Open the workspace