Skip to main content

Flex Item Sizing — exercises and bug fixes

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

    Let items grow

    easy10 min

    Give every item a flex-grow of 1.

  2. 2

    Stop an item shrinking

    easy10 min

    Set flex-shrink to 0 on the items.

  3. 3

    Set a flex basis

    easy10 min

    Give items a 120px basis.

  4. 4

    Reorder an item

    easy10 min

    Give the items an order of 2.

  5. 5

    Align one item differently

    medium10 min

    Use align-self to push the items to the end.

Find the bug(5)

  1. 1

    Fix flex-grow spelled wrong

    easy8 min

    The property is flex-grow.

  2. 2

    Fix grow used where shrink was meant

    easy8 min

    Preventing shrinkage uses flex-shrink: 0.

  3. 3

    Fix the missing unit on the basis

    easy8 min

    flex-basis needs a unit.

  4. 4

    Fix align-items used on an item

    easy8 min

    An individual item uses align-self.

  5. 5

    Fix the order set on the container

    easy8 min

    order applies to flex items, not the container.

Ready to write the code?

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

Open the workspace