Flexbox for Layout
Use Flexbox to align items in a row or column, distribute space, and wrap content without float hacks.
Flexbox for Layout is a free Frontend Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model designed for one-dimensional layouts — distributing space along a single row or column. It solves problems that float-based layouts couldn't handle elegantly.
Enabling Flexbox
Apply display: flex to the container. Its direct children automatically become flex items. Children of those items are not affected.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Sets the main axis. row (default): items arranged left to right. row-reverse: right to left. column: top to bottom. column-reverse: bottom to top.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — Main Axis Alignment
Distributes space along the main axis. flex-start (default), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — Cross Axis Alignment
Aligns items along the cross axis (perpendicular to main axis). stretch (default), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}gap Property
gap: row-gap column-gap adds space between flex items without using margin. Much cleaner than the margin hack. Widely supported in modern browsers.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
By default, flex items squeeze onto one line. flex-wrap: wrap lets them spill onto new lines when they don't fit. Combine with gap for a simple responsive grid.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}The flex Shorthand on Items
flex: grow shrink basis on flex items. flex: 1 is shorthand for 1 1 0% — items grow equally and ignore their content size. flex: 0 0 200px creates a fixed 200px item.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self on a flex item overrides the container's align-items for that one item. Useful for making one item align differently than its siblings.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }order Property
order controls the visual order of flex items without changing the HTML order. Default is 0. Lower values appear first. Use sparingly — it creates a mismatch between visual order and DOM/reading order.
Centering with Flexbox
The simplest way to center an element both horizontally and vertically: set the parent to display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Quick Check
Which Flexbox property distributes space between items along the main axis?
Recap: Flexbox Fundamentals
display: flex on the container. flex-direction: row or column for the axis. justify-content for main-axis spacing. align-items for cross-axis. gap for gutters. flex-wrap for multi-line. flex shorthand on items for growth. A versatile one-dimensional layout system.
Frequently asked questions
Is the “Flexbox for Layout” lesson free?
Yes — the full text of “Flexbox for Layout” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Flexbox for Layout”?
Use Flexbox to align items in a row or column, distribute space, and wrap content without float hacks. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Flexbox for Layout” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.