Learn CSS Flexbox
Flexbox layout: display, direction, justify-content, align-items. Monaco-powered CSS editor with live HTML+CSS preview and verify—learn by doing.
- Step 1
CSS Flexbox 1: Introduction
Flexbox is a powerful way to lay out elements. Use `display: flex;` on the container to activate it....
Start Lesson - Step 2
CSS Flexbox 2: flex-direction row
`flex-direction: row;` (default) places items in a horizontal row, left to right....
Start Lesson - Step 3
CSS Flexbox 3: flex-direction column
`flex-direction: column;` places items in a vertical column, top to bottom....
Start Lesson - Step 4
CSS Flexbox 4: justify-content center
`justify-content: center;` centers the items along the main axis....
Start Lesson - Step 5
CSS Flexbox 5: justify-content space-between
`justify-content: space-between;` distributes space between items....
Start Lesson - Step 6
CSS Flexbox 6: align-items center
`align-items: center;` centers items on the cross axis. Perfect for vertical centering....
Start Lesson - Step 7
CSS Flexbox 7: flex-wrap
`flex-wrap: wrap;` allows items to wrap to the next line when there's not enough space....
Start Lesson - Step 8
CSS Flexbox 8: gap
`gap` adds space between flex items without using margin on each item....
Start Lesson