⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

Equal-Width Flexbox Columns — CSS Generator

Build a CSS flexbox layout visually: flex-direction, justify-content, align-items, flex-wrap and gap on the container, plus per-child flex-grow, flex-shrink and flex-basis, all with a live preview and copyable CSS.

Processing... 0%

Result

This page opens the generator with flex-grow: 1 already set on all three preview boxes. Watch them: instead of shrinking to fit their content, every box claims an identical share of the leftover space in the row, which is the whole recipe for equal-width flexible columns — no percentage widths, no calc(), no fixed pixel math to keep in sync.

flex-grow: 1 tells a child to grow, and setting it on every child in the row means they all grow by the same amount, so they end up the same width regardless of how many there are or what content sits inside them. Add or remove a box with the controls below and the remaining columns instantly redistribute to stay equal — resize a browser window over this layout in production and it behaves the same way.

This is the pattern behind equal-height card grids, pricing-table columns and evenly split footer sections. Give one column more room by raising its flex-grow above the others, or copy the CSS block below exactly as generated for a clean equal split.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Container controls: flex-direction, justify-content, align-items, flex-wrap and a gap input in pixels, applied live to the preview.
  • Three color-coded child boxes by default (add up to eight, remove down to two), each with its own flex-grow, flex-shrink and flex-basis fields.
  • Copyable CSS block with a .flex-container rule plus one .flex-item-N rule per child that has non-default flex properties.

Key Benefits

✓ Every container control and every child's flex-grow, flex-shrink and flex-basis update three numbered preview boxes live, so you see exactly what your flexbox rules do before touching a stylesheet.
✓ The generator only prints child rules that actually differ from the CSS defaults, so the copied code stays short and readable instead of restating flex-grow: 0 on every box.
✓ Preset pages solve the layouts people search for by name: centering a div, a logo-left links-right navbar, and equal-width flexible columns — open one and the tool is already configured.

Use Cases

  • • Get the exact CSS to center a div both horizontally and vertically by watching justify-content and align-items work on live preview boxes.
  • • Build a logo-left, links-right navbar layout with space-between and align-items: center, then copy the container CSS straight into your header component.
  • • Compare space-between, space-around and space-evenly side by side on the same three boxes instead of guessing which one matches the spacing you want.