Skip to main content

Flex Direction — exercises and bug fixes

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

    Stack items in a column

    easy10 min

    Set the flex direction to column.

  2. 2

    Reverse the row

    easy10 min

    Set the direction to row-reverse.

  3. 3

    Reverse the column

    easy10 min

    Set the direction to column-reverse.

  4. 4

    Use the flex-flow shorthand

    easy10 min

    Set direction and wrap together with flex-flow.

  5. 5

    Column with a gap

    medium10 min

    Stack in a column with a 14px gap.

Find the bug(5)

  1. 1

    Fix the misspelled value

    easy8 min

    The value is column, not colum.

  2. 2

    Fix the wrong property

    easy8 min

    The property is flex-direction, not direction.

  3. 3

    Fix the reverse spelled wrong

    easy8 min

    The value is row-reverse.

  4. 4

    Fix the direction set on the items

    easy8 min

    flex-direction belongs on the container.

  5. 5

    Fix the missing flex container

    easy8 min

    flex-direction has no effect without display: flex.

Ready to write the code?

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

Open the workspace