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.
Make .navbar a flex container with its items spread apart using justify-content: space-between.
Center .hero-content both horizontally and vertically inside .hero using flexbox.
Make .cards a flex container that wraps onto new lines when the cards don't fit, using flex-wrap: wrap.
Make .stack a flex container laid out as a column (flex-direction: column) with its items centered horizontally.
Make .columns a flex row where every .column grows to share the space equally, using flex: 1 on each column.
Make #row a flex container.
Make #row an inline flex container.
Give the flex container a 16px gap.
Set a 10px row gap and a 30px column gap.
Flex container with 20px padding and a 12px gap.
.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.
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.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspace.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.
.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.
.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.
Flex properties do nothing without display: flex.
The value is flex, not flexbox.
The container needs display: flex, not the items.
Modern flex layouts space children with gap.
The property is column-gap, not gap-x.