CSS Flexbox Playground

The CSS Flexbox Playground turns Flexbox learning and experimentation into a visual, interactive experience. Every flex property — flex-direction, justify-content, align-items, align-content, flex-wrap, gap, flex-grow, flex-shrink, flex-basis, align-self — has a control you can toggle or slide, with the result rendering live in a preview area. Add or remove flex items, change their individual properties, and see how the container responds instantly. When you reach the layout you want, copy the generated CSS (ready to paste into your stylesheet) plus the corresponding HTML structure.

Flexbox is the most-used CSS layout mechanism in modern web development — powering navigation bars, card grids, form layouts, centered content, and responsive components. But remembering which property does what (justify-content vs align-items? what does flex-wrap: wrap-reverse look like?) is hard from documentation alone. Playing with live preview builds intuition fast. This playground helps junior developers learn Flexbox, senior developers prototype layouts quickly, and designers verify exactly what a CSS value will produce.

CSS Flexbox (Flexible Box Layout, CSS Level 1 stable since 2012, Level 2 under development) is a one-dimensional layout model. It arranges items in a row or column and distributes space among them according to rules you specify.

Container properties (applied to parent):

``css
.flex-container {
display: flex; /* or inline-flex */
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
align-content: stretch; /* for wrapped multi-line only */
gap: 0; /* shorthand for row-gap and column-gap */
row-gap: 0;
column-gap: 0;
}
``

Item properties (applied to children):

``css
.flex-item {
order: 0; /* integer, rearranges visual order */
flex-grow: 0; /* how much this item grows (0 = not at all) */
flex-shrink: 1; /* how much this item shrinks */
flex-basis: auto; /* initial size before grow/shrink */
flex: 0 1 auto; /* shorthand for grow/shrink/basis */
align-self: auto; /* override align-items for this item */
}
``

The shorthand flex:

The most confusing and common part. Common values:

- flex: 1 → 1 1 0% (grow to fill, shrink if needed, start from 0) — common for equal-width items
- flex: auto → 1 1 auto (grow to fill, shrink if needed, respect intrinsic width)
- flex: initial → 0 1 auto (default, no growing, can shrink)
- flex: none → 0 0 auto (no growing, no shrinking — fixed size)

Main axis vs cross axis:

In flex-direction: row (default), main axis is horizontal (left-right), cross axis is vertical (top-bottom). In column, axes swap. justify-content works on the main axis; align-items works on the cross axis.

Common patterns:

Horizontal center with vertical center:
``css
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
min-height: 100vh;
}
``

Navigation bar (equal spacing):
``css
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
``

Equal width columns:
``css
.row {
display: flex;
gap: 1rem;
}
.row > * {
flex: 1;
}
``

Responsive wrapping cards:
``css
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 300px; /* grow, shrink, min-width 300px */
}
``

Flexbox vs Grid:

- Flexbox: one-dimensional (row OR column). Ideal for: navigation, button groups, toolbars, alignment within components.
- Grid: two-dimensional. Ideal for: full-page layouts, card grids with rows AND columns, dashboards.
- Use both: Grid for outer layout, Flexbox for inner component layout.

Common bugs:

- justify-content: space-evenly not supported in IE11.
- gap in Flexbox not supported in Safari before 14.1 (2021).
- Margins on flex items do not collapse like in block layout.
- Implicit min-width: auto on flex items causes content to overflow — set min-width: 0 or overflow: hidden.

Flexbox vs CSS Grid: Flexbox is 1D (row OR column). Grid is 2D (row AND column). Use Flexbox for components (nav, toolbar, button group). Use Grid for page layouts (dashboards, complex forms). Most pages use both: Grid outside, Flexbox inside.

Flexbox vs Floats (legacy): Floats were the standard for layout before Flexbox (pre-2015). They are finicky, require clearfix hacks, and hard to center vertically. Flexbox solved all of it. No reason to use floats for layout in 2026 (still useful for text wrapping around images).

Flexbox vs Table-based layout (legacy): Tables for layout date to the 1990s. Completely inappropriate for modern layout — inaccessible, hard to style, inflexible. Flexbox is the modern replacement.

Flexbox vs Inline-block: inline-block is simpler for basic horizontal item alignment but has quirks (whitespace between items, vertical alignment headaches). Flexbox is cleaner and more powerful.

Flexbox vs Position: absolute: Absolute positioning removes items from the flow. Use for overlays, modals, tooltips. Do not use for main content layout — brittle on responsive.

Flex-direction row vs column: Row is default (horizontal flow). Column stacks items vertically. Neither is better — choose based on what you are building.