Toolypet
LAYOUT TOOL

CSS Flexbox Playground

Experiment with CSS Flexbox properties visually. Adjust direction, wrapping, alignment, and gap to understand how flex containers arrange their children.

8px
5
1
2
3
4
5
Generated CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

The One-Dimensional Layout Engine

Main Axis vs. Cross Axis

Every Flexbox layout has two axes. The main axis follows the flex-direction (row = horizontal, column = vertical). The cross axis is perpendicular. This distinction is fundamental: justify-content distributes space along the main axis, while align-itemsaligns along the cross axis. The most common beginner mistake is trying to vertically center with justify-content in a row layout — that property only works horizontally in row mode. Switch to align-items: center for vertical centering in a row container.

The flex Shorthand Decoded

flex: <grow> <shrink> <basis>

flex-grow determines how much extra space an item absorbs. In a container with 300px of free space, an item with flex-grow: 2 takes twice as much as one with flex-grow: 1 (200px vs 100px). flex-shrinkcontrols how items compress when space is tight — flex-shrink: 0 prevents an item from ever shrinking below its basis. flex-basis sets the initial size before growing/shrinking. The default flex: 0 1 automeans: don't grow, shrink normally, start at content size. The common flex: 1 expands to flex: 1 1 0%— grow equally, shrink equally, start at zero.

The min-width: 0 Fix

Flex items have an implicit min-width: auto, meaning they refuse to shrink below their content size. This causes the classic bug: a flex child with long text overflows its container instead of wrapping or truncating. The fix is min-width: 0 on the flex item, allowing it to shrink below its intrinsic content size. For vertical layouts, the equivalent is min-height: 0. This is by far the most common Flexbox debugging issue and affects text truncation with ellipsis, scrollable containers inside flex items, and images that refuse to scale down.

Flexbox vs. Grid: When to Choose

Flexbox is content-first: items determine the layout flow. Grid is layout-first: the container defines the structure and items are placed into it. Use Flexbox for navigation bars, button groups, card footers with variable content, and any scenario where items should wrap naturally. Use Grid for page layouts, image galleries, dashboard panels, and anything requiring alignment across both rows and columns. Modern best practice: Grid for the page skeleton, Flexbox for the component internals.

Frequently Asked Questions

Why does my flex item ignore the width I set?

In a flex container, flex-basis takes precedence over width (or height in column mode). If your item has flex: 1, its flex-basis is 0%, overriding any width you set. To use a specific width as the starting point, set flex: 0 0 200px(don't grow, don't shrink, start at 200px) or use flex: 1 1 200px (grow/shrink from 200px starting point).

How do I push one flex item to the far end (e.g., a logout button in a navbar)?

Use margin-left: auto (in row direction) on the item you want pushed to the end. Auto margins in Flexbox absorb all remaining free space, effectively pushing the item as far as possible. This is more robust than using justify-content: space-between because it works regardless of how many items are in the container.

What is the difference between flex-wrap: wrap and CSS Grid's auto-fill?

flex-wrap allows items to flow to the next line when they exceed the container width, but items on different rows are independent — they don't align into columns. Grid's repeat(auto-fill, minmax(250px, 1fr)) creates a true responsive grid where items align in both dimensions. Choose flex-wrap for content-driven flowing layouts (tag clouds, image chips), and Grid auto-fill for structured responsive grids.