Lesson 19 of 55 · HTML
Flexbox Layout
Duration: 10 min
Flexbox – One‑Dimensional Layout
.container {
display: flex;
flex-direction: row; /* row (default) or column */
justify-content: space-between; /* main‑axis alignment */
align-items: center; /* cross‑axis alignment */
flex-wrap: wrap; /* allow items to wrap */
gap: 1rem; /* spacing between items */
}
flex-direction–row(default) orcolumn.justify-content– Aligns items on the main axis (flex-start,center,space-around,space-between).align-items– Aligns items on the cross axis (stretch,flex-start,center).flexshorthand (flex: 1 0 auto) controls growth, shrink, and basis.gap– Modern spacing property; replaces margin tricks.
Example: Navigation bar
<nav class='nav'>
<a href='#'>Home</a>
<a href='#'>About</a>
<a href='#'>Contact</a>
</nav>
.nav { display: flex; gap: 1rem; }
Advanced tricks
order– Re‑order items for different breakpoints without changing HTML.flex-basis– Set the default size before growing/shrinking.align-self– Override the container’salign-itemsfor a single child.
Quick checklist for Flexbox
display:flexapplied to a container? ✅- Main‑axis (
justify-content) and cross‑axis (align-items) set intentionally? ✅ gapused instead of margins where possible? ✅orderused for responsive re‑ordering? ✅
Tip: Use the Flexbox Inspector in Chrome DevTools to visualise flex lines and item distribution.