Flexbox for real layouts
🏠The everyday picture
Three price cards in a row on a wide table, which stack one above the other when the table is narrow. They share the space fairly.
📘What it really is
- Settings on the items (children) control how they share space:
flex: 1lets an item grow to fill space; three items withflex: 1share the width equally;flex: 2takes twice the share of aflex: 1neighbour;flex-basissets an item's starting size, for exampleflex: 1 1 250pxmeans "start at 250px, grow and shrink as needed".-
With
flex-wrap: wrapand aflex-basis, cards fill a row and wrap onto new lines when the screen is narrow, without any extra rules. This is a first taste of responsive design (Module 16). -
A common page pattern keeps the footer at the bottom even on short pages:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1; }
100vh means the full height of the screen; main grows to push the footer down.
🖱️Try it
On your home page, add a <section class="cards"> with three <article>s (for example, three things you want
to build). Style .cards with display: flex; flex-wrap: wrap; gap: 1rem; and each article with
flex: 1 1 250px, padding, a border and rounded corners. Make your browser window narrow and wide, and watch
them wrap.
✅Quick check
Three cards each have flex: 1. What happens to the width?
Show the answer
They share the available width equally.
Your footer floats in the middle of a short page. What's a fix?
Show the answer
Make body a column flex container with min-height: 100vh and give main flex: 1.