Skip to main content

Flex Container — exercises and bug fixes

10 hands-on exercises and 10 find-the-bug challenges for the Flex Container 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(10)

  1. 1

    Space out a navbar

    easy15 min

    Make .navbar a flex container with its items spread apart using justify-content: space-between.

    • Set .navbar to display: flex.
    • Set justify-content: space-between.
  2. 2

    Center a hero message

    easy15 min

    Center .hero-content both horizontally and vertically inside .hero using flexbox.

    • Set .hero to display: flex.
    • Set justify-content: center.
    • Set align-items: center.
  3. 3

    Wrap a row of cards

    easy15 min

    Make .cards a flex container that wraps onto new lines when the cards don't fit, using flex-wrap: wrap.

    • Set .cards to display: flex.
    • Set flex-wrap: wrap.
  4. 4

    Stack items in a flex column

    easy15 min

    Make .stack a flex container laid out as a column (flex-direction: column) with its items centered horizontally.

    • Set .stack to display: flex.
    • Set flex-direction: column.
    • Set align-items: center.
  5. 5

    Build equal-width columns

    easy15 min

    Make .columns a flex row where every .column grows to share the space equally, using flex: 1 on each column.

  6. 6

    Create a flex container

    easy10 min

    Make #row a flex container.

  7. 7

    Use inline-flex

    easy10 min

    Make #row an inline flex container.

  8. 8

    Add a gap

    easy10 min

    Give the flex container a 16px gap.

  9. 9

    Separate row and column gaps

    easy10 min

    Set a 10px row gap and a 30px column gap.

  10. 10

    Build a padded flex bar

    medium10 min

    Flex container with 20px padding and a 12px gap.

Find the bug(10)

  1. 1

    Fix the toolbar that won't line up

    easy15 min

    .toolbar was meant to lay its buttons out in a flex row, but display is set to block, so they stack. Fix the display value.

  2. 2

    Fix the misspelled justify-content

    easy15 min

    The header's items should be spread apart with space-between, but a typo in the property value means it has no effect. Fix the value.

  3. 3

    Fix the sidebar's wrong direction

    easy15 min

    .sidebar's links should stack vertically as a column, but flex-direction is set to row, so they sit side by side. Fix the direction.

  4. 4

    Fix the uncentered avatar row

    easy15 min

    .avatar-row should vertically center its avatar and name, but align-items is set to flex-start, leaving the shorter item glued to the top. Fix it to center.

  5. 5

    Fix the tag list that won't wrap

    easy15 min

    .tag-list has many tags that overflow its box because flex-wrap is set to nowrap. Fix it so extra tags wrap onto new lines.

  6. 6

    Fix the missing display

    easy8 min

    Flex properties do nothing without display: flex.

  7. 7

    Fix the misspelled value

    easy8 min

    The value is flex, not flexbox.

  8. 8

    Fix the flex set on the items

    easy8 min

    The container needs display: flex, not the items.

  9. 9

    Fix margin used instead of gap

    easy8 min

    Modern flex layouts space children with gap.

  10. 10

    Fix the wrong gap property

    easy8 min

    The property is column-gap, not gap-x.

Ready to write the code?

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

Open the workspace