You have a row of elements. You want them centered. You add text-align: center, then margin: 0 auto, then maybe vertical-align: middle — and nothing works the way you expect. This frustration drove an entire generation of developers toward CSS Flexbox, and for good reason. Flexbox solved alignment in a way that finally made sense. Our Flexbox Playground lets you see exactly what every property does, experiment with real-time feedback, and copy the generated code straight into your project.
Why Flexbox still matters in 2026
CSS Grid gets much of the attention these days, and rightfully so. But Flexbox is not going anywhere. It remains the best tool for one-dimensional layouts — and most component-level design is exactly that. Navigation bars, card interiors, form rows, button groups, toolbars: these are all linear arrangements of elements along a single axis.
Flexbox is not a legacy technology. It is the foundation of almost every component you use daily. Even inside Grid layouts, individual cells typically use Flexbox to align their contents.
When to reach for Flexbox
- Component internals — Aligning an icon, a label, and a badge inside a button.
- Navigation bars — Distributing links horizontally with flexible spacing.
- Card layouts — Stacking content vertically with a footer pushed to the bottom.
- Responsive wrapping — Letting items flow onto new lines without media queries.
- Centering anything — The legendary two-line centering pattern that changed everything.
The Flexbox mental model: axes are everything
The single most important concept in Flexbox is the axis model. Once you internalize it, every property clicks into place.
Main axis vs cross axis
When you set display: flex, the container establishes two axes:
- Main axis — The direction items flow. Controlled by
flex-direction. By default, this runs left to right (row). - Cross axis — Perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical, and vice versa.
This is where most confusion lives. When you switch flex-direction from row to column, the axes swap. That means justify-content (which always operates on the main axis) suddenly controls vertical distribution instead of horizontal. And align-items (which always operates on the cross axis) now controls horizontal alignment.
The properties do not change their behavior. The axes rotate beneath them. Open the Flexbox Playground, toggle between row and column, and watch how justify-content and align-items reorient. This is the "aha" moment that makes Flexbox intuitive.
The six values of justify-content
Along the main axis, you have precise control over how leftover space is distributed:
flex-start— Items pack to the start. No extra space.flex-end— Items pack to the end.center— Items cluster in the middle.space-between— Equal space between items, none at the edges.space-around— Equal space around each item (edges get half-size gaps).space-evenly— Truly equal space everywhere, including edges.
The difference between space-between, space-around, and space-evenly is subtle but critical for polished interfaces. Use the playground to compare them side by side.
Align-items on the cross axis
Cross-axis alignment controls how items sit within the container's height (or width, in column mode):
stretch— Items expand to fill the container. This is the default and often catches people off guard.flex-start/flex-end— Items hug one edge.center— Items center along the cross axis.baseline— Items align by their text baselines. Essential for mixed-size typography.
Common layout patterns with Flexbox
Let us walk through real-world patterns you will use constantly.
The navigation bar
A horizontal navbar is the canonical Flexbox use case. The pattern is straightforward:
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
Logo on the left, links on the right, everything vertically centered. This is the Spread preset in our Flexbox Playground. The same pattern drives navigation components in products like Guthly and WePlanify, where the header must accommodate a logo, navigation links, and user actions in a single flexible row.
The centered hero
Centering content both horizontally and vertically used to require hacks. With Flexbox, it is two properties:
display: flex;
justify-content: center;
align-items: center;
That is it. The Centered preset demonstrates this pattern. It works for hero sections, loading states, empty states, and modal content.
The holy grail layout
The classic header-sidebar-content-footer layout works elegantly with nested Flexbox containers:
/* Outer container: vertical stack */
display: flex;
flex-direction: column;
min-height: 100vh;
/* Middle row: sidebar + content */
.middle {
display: flex;
flex-direction: row;
flex: 1 1 0%;
}
.sidebar {
flex: 0 0 250px;
}
.content {
flex: 1 1 0%;
}
The Sidebar preset in the playground lets you experiment with this structure. Set one item to flex-grow: 0 with a fixed basis, and the other to flex-grow: 1 — the content area absorbs all remaining space.
The card row with wrapping
For a collection of cards that wraps to new rows as the viewport shrinks:
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
Each card gets a fixed or minimum width via flex-basis, and the wrap property handles the responsive behavior. No media queries needed. The Wrap Grid preset demonstrates this pattern perfectly.
Understanding flex-grow, flex-shrink, and flex-basis
These three properties are the heart of Flexbox item sizing, and they trip up even experienced developers.
flex-basis: the starting point
flex-basis defines the ideal size of an item before any growing or shrinking happens. Think of it as a suggestion to the browser: "Start here, then adjust."
auto— Use the item's content size or explicit width/height.0%— Ignore the content size entirely. Distribute space purely based onflex-grow.200pxor50%— Start at exactly this size.
flex-grow: claiming extra space
When the container has leftover space after all items reach their flex-basis, flex-grow determines how that surplus is distributed. An item with flex-grow: 2 gets twice as much extra space as one with flex-grow: 1.
The critical insight: flex-grow does not set proportional widths. It distributes the remaining space proportionally. If items have different flex-basis values, the final sizes will not match the flex-grow ratios.
To get truly proportional sizing, set flex-basis: 0% on all items and use flex-grow for the ratios. This is exactly what flex: 1 does (shorthand for flex: 1 1 0%).
flex-shrink: yielding under pressure
When items overflow the container, flex-shrink controls how much each item compresses. The default is 1, meaning all items shrink equally. Set flex-shrink: 0 on an item to make it rigid — it will not shrink below its basis.
This is vital for sidebar layouts: the sidebar has flex-shrink: 0 to maintain its width, while the content area has flex-shrink: 1 to absorb the compression.
Experimenting in the playground
Click any item in our Flexbox Playground to open the item editor. Adjust grow, shrink, basis, and order independently for each item. Watch how changing one item's properties affects the entire layout. This interactive feedback is the fastest way to build an intuition for these properties.
The gap property: the modern spacing solution
Before gap came to Flexbox, spacing items required margin hacks — typically margin-right on all items except the last one, or negative margins on the container. These approaches were fragile and verbose.
The gap property is clean and predictable:
display: flex;
gap: 16px;
Space appears between items, never at the edges. It works with flex-wrap too: both row gaps and column gaps are handled uniformly. Our playground lets you drag a slider from 0 to 48px to see the effect in real time.
In the Eguth ecosystem, consistent gap values are part of the shared design tokens. Whether you are building a toolbar in GuthSearch or a form layout in GutHub, the same spacing scale applies, ensuring visual coherence across products.
Responsive patterns without media queries
One of Flexbox's greatest strengths is enabling responsive behavior without a single @media rule.
flex-wrap with flex-basis
Give each item a minimum width via flex-basis and enable flex-wrap: wrap. Items will flow to new lines when they can no longer fit:
display: flex;
flex-wrap: wrap;
gap: 16px;
.item {
flex: 1 1 300px;
}
Each item starts at 300px. On wide screens, multiple items fit in a row and grow to fill space. On narrow screens, they stack naturally. This pattern drives card layouts in Dropee and learning module grids that adapt seamlessly from desktop to mobile.
The min-width trick
Combine flex-grow: 1 with a min-width on one item and flex-shrink: 0 on another to create a sidebar that collapses below a threshold:
.sidebar {
flex: 0 0 250px;
}
.content {
flex: 1 1 0%;
min-width: 0;
}
The min-width: 0 override is important. By default, flex items will not shrink below their content size. This reset allows the content area to compress properly and prevents horizontal overflow.
Order for mobile reflow
The order property lets you visually rearrange items without changing the DOM. A common pattern: on mobile, the main content appears before the sidebar, even if the sidebar comes first in the markup. The playground's order slider makes this easy to test.
Flexbox in product interfaces
At Eguth, Flexbox is the workhorse of component layout across every product in the ecosystem:
- Guthly uses Flexbox for habit cards, streak displays, and dashboard action bars where items must distribute evenly.
- WePlanify relies on Flexbox for trip planning toolbars and participant avatars that wrap gracefully on smaller screens.
- GuthSearch aligns search input fields, filter badges, and result metadata with Flexbox rows.
- Dropee structures its gamified learning cards and progress indicators as flex containers.
- GutHub organizes collaboration threads and action buttons with flexible spacing patterns.
These components share design tokens for gap, direction, and alignment, maintaining visual consistency even as each product serves a different purpose.
Common mistakes to avoid
Forgetting min-width: 0
Flex items have an implicit min-width: auto, which prevents them from shrinking below their content size. This causes overflow bugs. Always set min-width: 0 (or overflow: hidden) on items that need to shrink beyond their content.
Using flex-grow for proportional columns
Setting flex-grow: 1 and flex-grow: 2 does not create a 1:2 width ratio unless flex-basis is 0% on both items. If basis is auto, the grow ratio applies to leftover space only.
Ignoring the default stretch
align-items defaults to stretch, which means items expand to fill the cross axis. This is often desirable, but can produce unexpected tall items when you do not set an explicit height.
Over-nesting flex containers
Not every element needs to be a flex container. If a simple display: block achieves the layout, do not add unnecessary complexity. Flexbox is powerful, but restraint makes code maintainable.
Best practices for production Flexbox
- Use the flex shorthand — Write
flex: 1instead of separately settingflex-grow,flex-shrink, andflex-basis. The shorthand sets sensible defaults. - Prefer gap over margins — It is cleaner, more predictable, and works seamlessly with wrapping.
- Combine Flexbox and Grid — Use Grid for page-level layout and Flexbox for component internals. They complement each other perfectly.
- Test with varying content lengths — Flexbox adapts to content, which means a short label and a long label will produce different results. Test edge cases.
- Use CSS custom properties for spacing — Define
--gap-sm,--gap-md,--gap-lgand use them consistently across flex containers.
Put it into practice
Theory only takes you so far. Open the Flexbox Playground, select a preset, and start experimenting. Add items, change their flex properties, toggle between directions, and watch the layout respond. Then copy the generated CSS or Tailwind code into your project.
Flexbox rewards exploration. The more you experiment with different combinations of direction, justify, align, and item properties, the faster you develop the instinct for building layouts that just work. And with a visual playground providing instant feedback, that instinct develops quickly.
Whether you are aligning a button group in Guthly, building a responsive navigation in WePlanify, or structuring search results in GuthSearch, Flexbox gives you the precise, flexible control that modern interfaces demand.