1.Space out a navbarexercise · easy · 15 min
Make .navbar a flex container with its items spread apart using justify-content: space-between.
Passes when: Set .navbar to display: flex; Set justify-content: space-between.
2.Center a hero messageexercise · easy · 15 min · practice plan
Center .hero-content both horizontally and vertically inside .hero using flexbox.
Passes when: Set .hero to display: flex; Set justify-content: center; Set align-items: center.
3.Wrap a row of cardsexercise · easy · 15 min · practice plan
Make .cards a flex container that wraps onto new lines when the cards don't fit, using flex-wrap: wrap.
Passes when: Set .cards to display: flex; Set flex-wrap: wrap.
4.Stack items in a flex columnexercise · easy · 15 min · practice plan
Make .stack a flex container laid out as a column (flex-direction: column) with its items centered horizontally.
Passes when: Set .stack to display: flex; Set flex-direction: column; Set align-items: center.
5.Build equal-width columnsexercise · easy · 15 min · practice plan
Make .columns a flex row where every .column grows to share the space equally, using flex: 1 on each column.
Passes when: Give each .column flex-grow of at least 1 (e.g. flex: 1).
6.Fix the toolbar that won't line upbug fix · easy · 15 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.
Passes when: Change display to flex on .toolbar.
7.Fix the misspelled justify-contentbug fix · easy · 15 min · practice plan
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.
Passes when: Fix the spelling of space-between.
8.Fix the sidebar's wrong directionbug fix · easy · 15 min · practice plan
.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.
Passes when: Change flex-direction to column.
9.Fix the uncentered avatar rowbug fix · easy · 15 min · practice plan
.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.
Passes when: Change align-items to center.
10.Fix the tag list that won't wrapbug fix · easy · 15 min · practice plan
.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.
Passes when: Change flex-wrap to wrap.
11.Create a flex containerexercise · easy · 10 min · practice plan
Make #row a flex container.
Passes when: Make #row a flex container.
12.Use inline-flexexercise · easy · 10 min · practice plan
Make #row an inline flex container.
Passes when: Make #row an inline flex container.
13.Add a gapexercise · easy · 10 min · practice plan
Give the flex container a 16px gap.
Passes when: Give the flex container a 16px gap.
14.Separate row and column gapsexercise · easy · 10 min · practice plan
Set a 10px row gap and a 30px column gap.
Passes when: Set a 10px row gap and a 30px column gap.
15.Build a padded flex barexercise · medium · 10 min · practice plan
Flex container with 20px padding and a 12px gap.
Passes when: Flex container with 20px padding and a 12px gap.
16.Fix the missing displaybug fix · easy · 8 min · practice plan
Flex properties do nothing without display: flex.
Passes when: Flex properties do nothing without display: flex.
17.Fix the misspelled valuebug fix · easy · 8 min · practice plan
The value is flex, not flexbox.
Passes when: The value is flex, not flexbox.
18.Fix the flex set on the itemsbug fix · easy · 8 min · practice plan
The container needs display: flex, not the items.
Passes when: The container needs display: flex, not the items.
19.Fix margin used instead of gapbug fix · easy · 8 min · practice plan
Modern flex layouts space children with gap.
Passes when: Modern flex layouts space children with gap.
20.Fix the wrong gap propertybug fix · easy · 8 min · practice plan
The property is column-gap, not gap-x.
Passes when: The property is column-gap, not gap-x.
