Flexbox Visual Playground

Flexbox (Flexible Box Layout) is a CSS module designed for one-dimensional layout control. Unlike older techniques like floats or absolute positioning, flexbox provides predictable alignment and space distribution between items in a container. It solves common problems like vertical centering, equal-height columns, and responsive reordering that were previously hacky or impossible. Modern web development relies heavily on flexbox—it's essential for navbars, card grids, sidebars, form layouts, and component-level alignment.

These properties align items on different axes:

• justify-content works on the main axis (the direction flex items flow: horizontal in row, vertical in column)
• align-items works on the cross axis (perpendicular to main: vertical in row, horizontal in column) In a standard row layout, justify-content moves items left/center/right, while align-items moves them up/center/down. The playground's visual axis arrows update dynamically to reinforce this as you change direction.

Use align-items for single-line containers (no wrapping) to control cross-axis alignment of items. Use align-content for multi-line containers (with flex-wrap: wrap or wrap-reverse) to control how the lines of items are distributed. align-content has no effect on single-line flex containers—this is a common source of confusion that the playground visualizes automatically.

These three properties control how flex items resize:

• flex-basis: The starting size before growing or shrinking (e.g., 200px, 50%, auto)
• flex-grow: How much the item expands to fill extra space (ratio-based, default 0)
• flex-shrink: How much the item contracts when space is tight (ratio-based, default 1) The shorthand flex: 1 1 200px sets grow, shrink, and basis together. In the playground, manipulate these individually to see how flex-grow: 2 gets twice the extra space as flex-grow: 1.

Check these common issues:

1. No extra space: flex-grow only applies when the container has surplus space after all items hit their flex-basis or content size
2. flex-basis too large: If basis equals or exceeds available space, there's nothing to grow into
3. Container constraints: Parent elements may have fixed widths or overflow: hidden limiting space
4. min-width/min-height: These can prevent shrinking, indirectly affecting growth calculations Use the playground's item selection to inspect computed sizes and test different basis values.

Set the container to flex-direction: column with min-height: 100vh (full viewport). Give your main content flex-grow: 1 and keep header/footer at flex-grow: 0. The content area expands to push the footer to the bottom when content is short, but allows natural scrolling when content is long. The Footer Bottom preset demonstrates this pattern.

Gap (gap, row-gap, column-gap) creates spacing only between items, not between items and container edges. Margin affects all sides and collapses in ways that complicate layouts. Gap is cleaner for flexbox grids because:

• No negative margin hacks needed on containers
• Consistent spacing regardless of wrapping
• Doesn't affect item dimensions in calculations
• Handles spacing between rows and columns uniformly The playground visualizes gap with measurement overlays when enabled.

Flexbox is one-dimensional—it controls layout along a single row OR column. For true two-dimensional control (simultaneous rows AND columns), use CSS Grid. However, flexbox excels at:

• Component-level alignment (buttons in a toolbar, items in a card)
• Unknown or dynamic numbers of items (wrapping grids)
• Content-driven sizing (items sized by their content)
• Simple distributions (center, space-between, etc.) Many layouts combine both: Grid for page structure, Flexbox for components inside grid areas.

Ensure your container has:

1. Explicit flex-wrap: wrap (default is nowrap)
2. Constrained width (items won't wrap if the container expands infinitely)
3. Items exceeding available space (wrapping only triggers when combined width exceeds container) In the playground, enable Mobile view to force width constraints and test wrapping behavior.

Flexbox is universally supported in all modern browsers since 2015. The only concerns are:

• IE11 has partial support with bugs (avoid flex-shrink, flex-basis with calc())
• Older Safari needed -webkit- prefixes (no longer required) The playground generates modern unprefixed CSS suitable for production in 2024+.

The Perfect Center preset demonstrates: set both justify-content: center (main axis) and align-items: center (cross axis). For a row direction, this centers horizontally and vertically. The item needs no special properties—center alignment comes entirely from the container.

Yes, using the order property. Items default to order: 0. Negative values move items earlier; positive values move them later. This is visual reordering only—screen readers and tab order follow the DOM. Use for responsive layouts (e.g., sidebar first on desktop, last on mobile) but not for accessibility-critical reordering.

By default, align-items: stretch makes items fill the container's cross-axis size. To prevent this:

• Set align-items: flex-start (or center, flex-end) on the container
• Or set align-self: [value] on specific items The Holy Grail preset uses stretch for equal-height columns; the Navbar preset uses align-items: center for consistent vertical centering regardless of content.

Set flex-shrink: 0 on the item. This is common for:

• Fixed-width sidebars that must stay visible
• Icon buttons that shouldn't compress
• Minimum-size guarantees for readability Combine with flex-basis for a fixed starting size that never budges.

flex: 1 expands to flex: 1 1 0% (grow: 1, shrink: 1, basis: 0%). This makes items:

• Grow equally to fill space
• Shrink equally when tight
• Ignore content size (0% basis) for true proportional distribution Contrast with flex: auto (1 1 auto) which respects content size as the starting point before growing.

Absolutely—nesting flex containers is common and powerful. A page might use:

• Outer flex container for header/main/footer structure
• Inner flex container for navigation items
• Another inner flex for a card's image/content/footer alignment Each container establishes its own independent flex context. The playground previews single containers, but the generated CSS works seamlessly in nested structures.