Roadmap › HTML5 & CSS3 — Semantic Markup to Responsive Layouts › Module: Layout and Responsive Design
Lessons in this course (11)
6. Flexbox — one-dimensional layout
Intermediate★ Must knowLesson 6 of 11
css
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 200px; } /* grow to fill free space */| Property (container) | Does |
|---|---|
flex-direction | row / column — sets the main axis |
justify-content | Align on the main axis (flex-start, center, space-between) |
align-items | Align on the cross axis (stretch, center) |
flex-wrap | Allow items onto new lines |
gap | Space between items |
| Property (item) | Does |
|---|---|
flex: 1 | Shorthand for grow 1, shrink 1, basis 0 — share space equally |
flex: 0 0 200px | Fixed 200px, no grow/shrink |
align-self / order | Override alignment / visual order |
Classic: perfectly centre anything — display:flex; justify-content:center; align-items:center; (or Grid place-items:center).