Skip to main content

Align Items — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Align Items 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 on the cross axis

    easy10 min

    Centre the items vertically in a row.

  2. 2

    Align to the start

    easy10 min

    Pull items to the top of the row.

  3. 3

    Align to the end

    easy10 min

    Push items to the bottom of the row.

  4. 4

    Stretch the items

    easy10 min

    Make items fill the cross axis.

  5. 5

    Centre both axes

    medium10 min

    Centre horizontally and vertically at once.

Find the bug(5)

  1. 1

    Fix justify-content used for the cross axis

    easy8 min

    Vertical alignment in a row uses align-items.

  2. 2

    Fix the misspelled property

    easy8 min

    The property is align-items, not align-item.

  3. 3

    Fix the missing hyphen

    easy8 min

    The value needs a hyphen: flex-start.

  4. 4

    Fix align-self used on the container

    easy8 min

    The container property is align-items.

  5. 5

    Fix the invalid value

    easy8 min

    "middle" is not a flexbox alignment value.

Ready to write the code?

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

Open the workspace