What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (the direction set by flex-direction — horizontal for row, vertical for column). align-items aligns items along the cross axis, perpendicular to the main axis. Flip flex-direction and their visual effect swaps.

When should I use flexbox vs CSS Grid?

Use flexbox for one-dimensional layouts — a single row or column of items, like a navbar, a button group, or a card that needs its content vertically centered. Use Grid when you need to control both rows and columns simultaneously, like a page layout or a photo gallery with fixed tracks.

What does flex: 1 actually expand to?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Setting flex-basis to 0 means the item ignores its content size when distributing space, so multiple items with flex: 1 split the container exactly evenly regardless of their content length.

Why won't my flex item shrink below its content size?

This is the well-known "min-width: auto" default on flex items. By default, flex items refuse to shrink smaller than their content's minimum intrinsic size (a long unbreakable word, or an image at natural size), even with flex-shrink set. Add min-width: 0 (or min-height: 0 for columns) to the item to override this.

What is the difference between flex-wrap: wrap and nowrap?

nowrap (the default) forces all items onto a single line, shrinking them if necessary to fit. wrap allows items to flow onto multiple lines when they no longer fit at their minimum size, similar to how text wraps at the edge of a paragraph.

How does gap work compared to using margins on items?

gap adds fixed spacing only between items, never on the outer edges of the container, and it does not require handling the "last item has no margin" problem that margin-based spacing needs. It also correctly respects flex-wrap, adding consistent spacing both between and across wrapped rows.

Why does an image inside a flex item overflow or distort?

Images have an intrinsic aspect ratio that flexbox does not know how to respect automatically when flex-shrink or flex-grow are applied. Set max-width: 100%, height: auto, and often object-fit: cover on the image itself so it scales inside whatever box flexbox gives it.

Is flexbox supported in all modern browsers?

Yes — flexbox has been fully supported in Chrome, Firefox, Safari, and Edge since around 2015 with no vendor prefixes required for the standard syntax. It is safe to use flexbox for any project that does not need to support Internet Explorer 10 or older.

Can flexbox items be reordered visually without changing HTML?

Yes — every flex item accepts an order property (an integer, default 0) that changes its visual position independent of source order. This is useful for responsive layouts where a sidebar needs to appear after the main content on mobile but before it on desktop, without duplicating markup.

All ToolsFlexbox Playground

Flexbox Playground

Build and learn CSS Flexbox layouts interactively. Customize item colors, element types, shadows, and border radius — copy complete CSS.

ilovedocstools.com

Flexbox Playground

Processing…

Processed on your device

FREE

Loading…

Go Pro ↑

Container

flex-direction

justify-content

align-items

flex-wrap

gap12px

Items

Live Preview (click item to edit)

Generated CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

Your files never leave your device. All processing happens locally in your browser — nothing is uploaded to our servers.Files are never stored on our servers · No tracking of your file contentsPrivacy Policy

What is Flexbox Playground?

Flexbox Playground is an interactive builder for CSS Flexbox layouts. You control every container-level property — flex-direction, justify-content, align-items, flex-wrap, and gap — and, separately, every item's own flex-grow, flex-shrink, flex-basis, element type, colors, border radius, box shadow, and padding. Every change reflects instantly in a live DOM preview built from real HTML and CSS, and the complete stylesheet is available to copy at any point.

Flexbox solves a problem CSS struggled with for two decades: distributing space among a row or column of items whose sizes are not known in advance. Before flexbox, centering something vertically or making three columns share leftover space evenly required float hacks, table-cell displays, or JavaScript. Flexbox does it with five or six declarations because it defines an actual algorithm — the browser resolves each item's final size by computing its flex-basis, then growing items with flex-grow to fill leftover space or shrinking items with flex-shrink when content overflows the container, all along a single axis defined by flex-direction.

The two axes are where most flexbox confusion starts. flex-direction: row makes the main axis horizontal, so justify-content controls horizontal spacing and align-items controls vertical alignment. Switch to flex-direction: column and the axes swap — justify-content now controls vertical spacing and align-items controls horizontal alignment. This playground lets you flip flex-direction and watch justify-content and align-items visibly swap roles, which is a faster way to build the mental model than reading a diagram.

The per-item panel matters because flexbox is not just a container property — flex-grow, flex-shrink, and flex-basis live on the children, and they interact with the container's wrap and gap settings in ways that are hard to predict without seeing them. Setting flex-grow: 1 on one item and leaving the rest at 0 gives that single item all the leftover space; setting flex-shrink: 0 stops an item from shrinking below its content size even when siblings compete for room. Element types (text, heading, button, image, card) exist so you can preview flexbox behavior against realistic content instead of blank colored boxes, since real text and images behave differently under grow/shrink than an empty div does.

How It Works

Every container control (flex-direction, justify-content, align-items, flex-wrap, gap) updates a real CSS flex container in the preview pane immediately — there is no simulation, the preview is the actual browser flexbox layout engine rendering your choices. Each item keeps its own state object for flex-grow, flex-shrink, flex-basis, colors, border-radius, box-shadow, and padding, plus an "element type" that swaps the rendered markup between plain text, a heading, a button, an image, or a card layout. The CSS panel reconstructs a clean stylesheet from all of this state — a .flex-container rule with your five container properties, plus a numbered .item-N rule for any item whose flex or style properties differ from the defaults — ready to paste into a real project.

How to Use

1
Set container properties
Choose flex-direction to set the main axis, then justify-content and align-items to control spacing along each axis. Toggle flex-wrap and drag the gap slider to see how multi-row layouts behave.
2
Add or remove items
Click + Add to append a new flex item (up to 10), or hover an item badge and click the × to remove it. Watch how the remaining items redistribute space immediately.
3
Select an item to edit
Click any item directly in the preview, or click its numbered badge below the container controls, to open its dedicated properties panel.
4
Tune flex-grow, flex-shrink, and flex-basis
Adjust the three flex sizing properties on the selected item to see exactly how it competes with siblings for available space — this is the part of flexbox most tutorials skip over.
5
Pick an element type and style it
Switch the item between blank, text, heading, button, image, or card so you're previewing against realistic content, then set background color, text color, border radius, box shadow, and padding.
6
Copy the generated CSS
Click Copy CSS to grab the full container rule plus a numbered rule for every item that differs from the defaults — paste it straight into your stylesheet.

Who Uses This Tool

🧭

Navigation Bars

Build horizontal navbars with space-between links and centered logos.

🃏

Card Rows

Lay out rows of cards with equal spacing and centered content.

📋

Form Layouts

Arrange label/input pairs in flexible rows that wrap on small screens.

📱

Mobile Stack

Use flex-direction: column to stack elements vertically for mobile.

🎯

Centered Content

justify-content: center + align-items: center = perfect centering.

📐

Learning Flexbox

Experiment with every property combination to build your flexbox intuition.

Why Choose This Tool

Rich Item Editing

Set element type, color, shadow, and radius per item for a complete layout preview.

All Container Props

flex-direction, justify-content, align-items, flex-wrap, and gap all exposed.

Real DOM Preview

The preview uses actual HTML and CSS — exactly what browsers render.

Color Swatches

Quick-pick from 12 color swatches or enter any hex value per item.

Complete CSS Output

Container + customized item styles in one copy.

No Signup Required

100% browser-based — start building immediately.

Also Try

CSS Grid Generator CSS Animation Generator Glassmorphism Generator CSS Beautifier HTML Beautifier CSS Compressor

Key Benefits

All 5 container flex properties with instant live preview
Per-item: flex-grow, flex-shrink, flex-basis, element type, color, shadow, radius, padding
Preview renders real content types — text, headings, buttons, images, cards — not just blank boxes
Custom colors with swatches and hex input per item
Complete, clean CSS output for container and customized items only
Great for building flexbox intuition without a code editor

Frequently Asked Questions

Also Known As

flexbox playground online freecss flexbox builder interactiveflexbox visualizer online toolcss flex layout generatorinteractive flexbox generatorflexbox learning tool onlinecss flexbox code generatorflexbox properties visualizer

Related Tools

Binary To Decimal

Convert between binary, decimal, hex and octal number systems

Color Converter

Convert colors between HEX, RGB, and HSL formats

Convert Binary

Convert binary numbers to text and text to binary

Convert Timestamp

Convert Unix epoch timestamp to standard date format and back

Count Words

Count words, characters, sentences and paragraphs in text

Convert Datetime

Convert datetime between different formats and timezones

Trusted Worldwide

Free Online Document Tools for Everyone

iLoveDocsTools is used by students, professionals, and businesses across the United States, Canada, United Kingdom, Australia, India, and more than 100 other countries. All tools are browser-based and process files privately — your files never leave your device. Free to use, with Pro plans for unlimited access.

No Upload Required

All processing happens directly in your browser. Your documents are never sent to any server — complete privacy guaranteed for users in the USA, Canada, UK, and worldwide.

Free to Use — Pro Plans Available

Every tool on iLoveDocsTools is free to use. Need more? Upgrade to Pro for unlimited usage, priority access, and no daily limits. Trusted by students, freelancers, and teams across North America and Europe.

Works on Any Device

Whether you are on a Mac, Windows PC, iPhone, or Android in New York, Toronto, London, or Sydney — our tools work instantly in any modern browser.

Looking for free PDF tools in the USA? Free document converters in Canada? Online PDF editors in the UK or Australia? iLoveDocsTools offers 70+ free tools — merge PDF, split PDF, compress PDF, convert Word to PDF, Excel to PDF, JPG to PDF, and many more — all free, all instant, all private. No watermarks. No file size limits. Just free tools that work.