AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do you build a CSS flexbox layout?

Set the parent to display: flex, then choose a flex-direction (row or column), a justify-content for the main axis and an align-items for the cross axis. Add gap for spacing, and on each child use flex-grow, flex-shrink and flex-basis to control how it fills space. This playground lets you set every property visually, click items to tune them, drop into layout presets, and copies clean CSS — all in your browser.

  • Container: display: flex + flex-direction, flex-wrap, justify-content, align-items, align-content, gap
  • Items: flex-grow (share extra space), flex-shrink (give up space), flex-basis (starting size), align-self, order
  • justify-content aligns on the main axis; align-items aligns on the cross axis
  • Presets: perfect centering, navbar, sidebar + content, equal columns, sticky footer
  • 100% client-side — the preview is a real flex container laid out locally, nothing uploaded

What is

CSS Flexbox

Flexbox (the CSS Flexible Box Layout) is a one-dimensional layout model that arranges items along a single main axis — a row or a column — and distributes free space and alignment between them using container properties (justify-content, align-items, gap) and item properties (flex-grow, flex-shrink, flex-basis).

Web Design

Related terms

CSS Gridjustify-contentalign-itemsflex-growflex-basisgap

Frequently Asked Questions

Yes. The preview is a real flex container laid out on your device and the CSS is built locally — nothing is uploaded, and there is no server or CDN in the processing path.

Everything is 100% client-side. Your property choices are just numbers and strings; the live preview is a genuine DOM flex container the browser lays out on your device, and the tool serializes a ready-to-paste .container rule plus a .item-N rule for each item entirely in the page. No file or setting is ever sent to a server, and it works offline once the page is cached.

justify-content aligns items along the main axis (the direction items flow), while align-items aligns them along the cross axis (perpendicular to the flow).

In a flex container there are two axes. The main axis is the direction items flow — horizontal for flex-direction: row, vertical for column. justify-content positions items along that main axis (start, center, end, space-between, space-around, space-evenly). The cross axis is perpendicular to it, and align-items positions items along the cross axis (stretch, start, center, end, baseline). To centre something perfectly, set both to center. When flex-direction changes to column, the two axes swap, so the same property now affects the opposite direction.

flex-basis sets an item’s starting size, flex-grow shares out any extra space, and flex-shrink decides how much an item gives up when space is tight.

These three item properties (combined in the flex shorthand) control sizing. flex-basis is the item’s initial size along the main axis before any growing or shrinking — the baseline the browser starts from (auto uses the content or width). flex-grow is a unitless factor for distributing leftover space: 0 means don’t grow, and items with higher values take proportionally more. flex-shrink is the mirror — it only kicks in when items overflow the container, and 0 stops an item from shrinking. A common pattern is flex: 1 (grow 1, shrink 1, basis 0) for equal columns, and flex: 0 0 240px for a fixed-width sidebar.

Use flexbox for one-dimensional layouts (a single row or column, like a navbar) and CSS Grid for two-dimensional layouts (rows and columns together, like a page scaffold).

Flexbox is one-dimensional — it lays items along one axis at a time, which is perfect for navbars, toolbars, button groups, centring, and sharing leftover space. CSS Grid is two-dimensional — it aligns items in rows AND columns simultaneously, which suits page scaffolds, dashboards and galleries. They are not rivals: in real projects you use Grid for the overall page and flexbox inside individual cells. If you find yourself fighting flexbox to line things up in a grid, that is the signal to switch to Grid.

Detailed Explanation

How It Works

What CSS Flexbox Is and How This Playground Builds It

Flexbox is the CSS Flexible Box Layout — a one-dimensional model that arranges items along a single main axis (a row or a column) and distributes free space and alignment between them. The Flexbox Playground sets a live parent element to display: flex and exposes every container property (flex-direction, flex-wrap, justify-content, align-items, align-content, gap / row-gap / column-gap) as segmented controls, so the visual preview is a genuine DOM flex container the browser lays out on the user’s device rather than an image.

  • display: flex turns an element into a flex container; its children become flex items
  • The main axis follows flex-direction (row = horizontal, column = vertical); the cross axis is perpendicular
  • justify-content aligns items on the main axis; align-items aligns them on the cross axis
  • align-content aligns wrapped lines and only applies when flex-wrap allows multiple lines
  • gap (and row-gap / column-gap) sets the spacing between items with universal modern-browser support
Methodology

Item Sizing: flex-grow, flex-shrink, flex-basis, order and align-self

Each flex item carries its own properties, which the playground edits by clicking a numbered block. flex-basis sets the item’s starting size along the main axis before any adjustment; flex-grow is a unitless factor that shares out leftover space (0 = do not grow); and flex-shrink decides how much an item gives up when items overflow (0 = do not shrink). order re-sequences items visually without changing the source, and align-self overrides the container’s align-items for that one item. The engine serializes a .container rule plus a .item-N rule only for items that differ from the CSS defaults, keeping the output minimal.

  • flex-basis = initial main-axis size (auto uses content/width); it beats width on the main axis
  • flex-grow shares extra space proportionally; higher values take more
  • flex-shrink only engages when items overflow; 0 keeps an item at its basis
  • flex: 1 (grow 1 / shrink 1 / basis 0) makes equal columns; flex: 0 0 240px makes a fixed sidebar
  • order changes visual order only; align-self overrides align-items per item
Use Cases

When to Use Flexbox versus CSS Grid

Flexbox is one-dimensional and best when content flows along a single axis: navbars, toolbars, button groups, centring, and distributing leftover space. CSS Grid is two-dimensional and better when rows and columns must align together — page scaffolds, dashboards and galleries. The two are complementary rather than competing: a common pattern is Grid for the overall page and flexbox inside individual cells. The playground ships working presets (perfect centering, navbar with spaced items, sidebar + fluid content, equal columns, sticky-footer column) so users can learn the canonical 1-D patterns and adapt them.

  • Flexbox = one dimension (a row OR a column); ideal for navbars, toolbars, centring
  • CSS Grid = two dimensions (rows AND columns aligned); ideal for page scaffolds and galleries
  • They compose: Grid for the page, flex inside cells
  • Presets cover centering, navbar, sidebar+content, equal columns and sticky footer
Privacy & Security

Why It Is Private by Design

Everything happens on the user’s device. The property choices are just numbers and strings, the live preview is a real browser-rendered flex container, and the CSS is serialized entirely in the page tab — there is no server call and no CDN for processing. Nothing is uploaded, logged or stored, output is plain CSS text copied to the local clipboard, and the tool works offline once loaded.

  • CSS and preview are built entirely in the browser — no upload, no CDN, no server
  • The preview is a genuine DOM flex container, not a server-rendered image
  • Output is plain CSS text copied locally to the clipboard
  • Works offline after first load; nothing is stored server-side
Flexbox alignment and sizing properties at a glance
PropertyApplies toAxis / roleCommon values
justify-contentContainerMain axis distributionflex-start · center · space-between · space-evenly
align-itemsContainerCross axis alignmentstretch · center · flex-start · baseline
align-contentContainer (wrapped)Space between wrapped linesstretch · center · space-between (needs flex-wrap)
flex-growItemShare of extra space0 (fixed) · 1 (grow) · higher = more
flex-shrinkItemGive up space when tight1 (default) · 0 (never shrink)
flex-basisItemStarting main-axis sizeauto · 0 · 240px · 25%

Flexbox is one-dimensional (a single row or column); for two-dimensional row-and-column layouts use CSS Grid. The main and cross axes swap when flex-direction changes between row and column. gap and flex-wrap have universal modern-browser support. As of July 2026.