CSS Tutorial
CSS Flexbox
A flex container aligns items on one axis. Gap, wrap, grow, and space-between replace most floats — toolbars, chips, a lab header.
One axis at a time
Flexbox is for a row of buttons, a nav, a card header with a title on the left and a price on the right. You put display: flex on the parent. The children become flex items. The main axis runs in the direction of flex-direction (row by default). The cross axis is perpendicular.
Harbor studio’s booking strip — three desks in a line, equal height, a gap, wrapping on a phone — is a flex container. You do not float the desks. You do not fight inline-block whitespace. The parent owns the alignment.
display: flex, then justify and align
justify-content distributes extra space on the main axis. align-items lines items up on the cross axis. Remember: justify is “along the row,” align is “up and down” when the direction is row.
| Property | Common values | Effect on a row |
|---|---|---|
justify-content | flex-start, center, space-between, space-around | Left, center, split, or padded along the row |
align-items | stretch, center, flex-start, flex-end | Height and vertical position |
gap | a length | Space between items, not outside the group |
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: #fff;
border: 1px solid #7dd3fc;
border-radius: 0.65rem;
}
h1 { margin: 0; font-size: 1.1rem; color: #0d9488; }
.hours {
margin: 0;
color: #0369a1;
font-size: 0.9rem;
}
</style>
<header class="bar">
<h1>Harbor studio</h1>
<p class="hours">Open 8–16</p>
</header>gap is the space between items. Padding is the space inside the container. Do not fake a gap with margin on every child — the last item’s margin is a leftover you then have to cancel. Try this header at /css/try and switch space-between to center.
Wrap when the row runs out
The default is flex-wrap: nowrap. Items shrink or overflow. Set flex-wrap: wrapand extra items drop to the next line. Combine with a min width on the children so a desk card does not crush to a sliver before wrapping.
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.desks {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.desk {
flex: 1 1 8rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #bae6fd;
border-radius: 0.5rem;
}
h2 { margin: 0 0 0.3rem; font-size: 1rem; color: #0f766e; }
p { margin: 0; color: #475569; font-size: 0.9rem; }
</style>
<h1>Harbor studio</h1>
<div class="desks">
<article class="desk"><h2>Tide</h2><p>Window</p></article>
<article class="desk"><h2>Pier</h2><p>Quiet</p></article>
<article class="desk"><h2>Loft</h2><p>Two seats</p></article>
</div>flex: 1 1 8rem is grow, shrink, and a basis of 8rem. The cards share leftover space, can shrink, and wrap when there is not room for an 8rem basis plus gaps. Narrow the preview to see the wrap.
Grow and shrink
flex-grow is a weight for leftover space. Two items with grow 1 split extra width equally. An item with grow 2 takes twice as much leftover as one with 1.flex-shrink is the matching weight when the row is too tight. flex: 0 0 automeans do not grow, do not shrink, size to content — a logo that should stay put.
Example
<style>
body {
font-family: system-ui, sans-serif;
color: #0c4a6e;
background: #f0f9ff;
margin: 1.25rem;
}
.row {
display: flex;
gap: 0.5rem;
}
.row > div {
padding: 0.75rem;
border-radius: 0.4rem;
color: #fff;
text-align: center;
}
.main { flex: 2; background: #0d9488; }
.side { flex: 1; background: #0284c7; }
</style>
<h1>Harbor studio</h1>
<div class="row">
<div class="main">Gallery (grow 2)</div>
<div class="side">Hours (grow 1)</div>
</div>A compact cheat sheet
- Parent:
display: flex, thenjustify-content,align-items,gap,flex-wrap. - Child:
flex-grow,flex-shrink,flex-basis— or theflexshorthand. - A single item can override alignment with
align-self. - Two-dimensional pages (header + main + sidebar at once) belong to Grid, next chapter.
Flexbox replaced most float layouts for components. Float still exists for wrapping text around an image. For a toolbar, a nav, or a row of cards, start with flex.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Engineering
A toolbar: name left, status right
A flex container lays items on one axis. justify-content: space-between pushes the ends apart. align-items: center lines up a 28 px mark with the words.
gap is the space between items. flex: 1 on the main column eats leftover width. wrap lets chips fall to the next line on a phone.
Example
<style>
.bar { display: flex; justify-content: space-between; align-items: center; background: #f0fdfa; padding: 0.5rem; }
</style>
<div class="bar"><span>Harbor lab</span><span>ok · 12 mT</span></div>Maths
Three side lengths in a row
flex with gap replaces most float rows. The 3-4-5 tiles stay one axis. For two-dimensional posters, use grid.
a² + b² = c²
Example
<style>
.row { display: flex; gap: 0.5rem; }
.row span { background: #e0e7ff; padding: 0.4rem 0.6rem; }
</style>
<div class="row"><span>3</span><span>4</span><span>5</span></div>