Flexbox Deep Dive: alignment wrapping order
Master justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis, and the order property.
Flexbox Deep Dive: alignment wrapping order is a free Frontend Academy lesson on CoddyKit — lesson 1 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.
Review: Flex Container and Items
Recap: display: flex on the container creates flex items from direct children. The main axis runs along flex-direction. The cross axis is perpendicular.
justify-content Values in Detail
All justify-content values on a row-direction container: flex-start (default), flex-end, center, space-between (gaps between only), space-around (equal margin around each), space-evenly (equal gaps everywhere).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items vs align-content
align-items aligns items within a single line. align-content aligns multiple lines (only works when flex-wrap is wrap and there are multiple lines).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self on Individual Items
align-self overrides align-items for a specific flex item. Useful for making one item stretch while others are centered.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap and wrap-reverse
flex-wrap: wrap allows items to flow to new lines. wrap-reverse wraps but in the reverse direction. Combine with gap for simple responsive grids.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow, flex-shrink, flex-basis
The three-part flex shorthand on items. flex-grow: share of available space. flex-shrink: rate of shrinking when space is tight. flex-basis: initial size before growing/shrinking.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Common flex Shorthands
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (takes twice as much space as flex: 1).
order Property
order changes the visual order of flex items without modifying HTML. Default is 0. Negative values appear before 0. Use carefully — mismatches between visual and DOM order confuse keyboard and screen reader users.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 for Overflow Fix
Flex items have an implicit min-width: auto, which means they won't shrink below their content size. Set min-width: 0 to allow them to shrink smaller — essential for text truncation inside flex items.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Flex Gaps Without gap
In older environments without gap support, use margin on items and negative margin on the container to create gutters. But today, gap is supported in all modern browsers — prefer it.
Nested Flex Containers
Any flex item can itself be a flex container. Nest Flexbox for complex layouts: a row of cards where each card's internals are also flex-arranged. This is the normal pattern in modern layouts.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Quick Check
Which property distributes space between flex items along the cross axis when flex-wrap is wrap?
Recap: Flexbox Deep Dive
justify-content for main axis distribution. align-items for single-line cross axis. align-content for multi-line cross axis. align-self per item. flex-wrap: wrap enables multi-line. flex shorthand controls growth/shrink/basis. order changes visual order. min-width: 0 prevents shrink bugs.
Frequently asked questions
Is the “Flexbox Deep Dive: alignment wrapping order” lesson free?
Yes — the full text of “Flexbox Deep Dive: alignment wrapping order” 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 Deep Dive: alignment wrapping order”?
Master justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis, and the order property. 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 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Flexbox Deep Dive: alignment wrapping order” 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.
All lessons in this course
- Flexbox Deep Dive: alignment wrapping order
- CSS Grid: template-areas auto-fit minmax
- Combining Flexbox and Grid
- CSS Variables for Theming