Flexbox Playground
Learn Flexbox by Playing
Flexbox arranges items in a row or column. Drag sliders, click options, and watch the layout change. No code typing needed.
New to Flexbox? Read the visual lesson →Flex Container Basics
These properties go on the parent container. They control how child items are laid out.
What is Flexbox?
Add display: flex to any container and its children become flexible items. They line up in a row by default. That's it — you just "turned on" Flexbox!
Which way do items flow?
How are items spaced along the flow direction?
How are items positioned perpendicular to the flow?
Should items wrap to the next line?
Space between items
Main axis: → Cross axis: ↓
Alignment Visualizer
See exactly how justify-content and align-items interact. The blue lines show the main axis and cross axis.
The Two Axes
justify-content controls the main axis (the direction items flow). align-items controls the cross axis (perpendicular to the flow). In a row, main = horizontal, cross = vertical. In a column, they swap!
flex-start: Items packed at the start of the main axis. This is the default.
— Main axis (justify-content) | Cross axis (align-items)
Individual Item Controls
These properties go on individual child items, not the container. Control how each item grows, shrinks, and aligns.
flex-grow, flex-shrink, flex-basis
flex-grow: How much extra space should this item take? 0 = don't grow, 1 = take equal share. flex-shrink: Should this item shrink when space is tight? flex-basis: Starting size before growing/shrinking. align-self: Override the container's align-items for just this one item.
Adjust each item's flex properties independently:
Real-World Layouts
Click any layout to see it built with Flexbox. Study the code, then copy it.
Flexbox is everywhere
Navigation bars, card rows, footers, form layouts, media objects — almost every piece of a modern website uses Flexbox. These are layouts you'll build over and over.
Click a layout above to see it
The whole thing as one file
Everything you learned — a flex navbar, a centered hero, a wrapping card row, and a footer with columns — combined into one complete HTML file you can copy, save as index.html, and open in a browser.
Live preview
Complete HTML — copy this whole file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Page</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2433; background: #f6f8fb; }
/* ===== Navbar: flex with space-between ===== */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
background: #fff;
border-bottom: 1px solid #e9edf3;
}
.navbar .logo { font-weight: 800; font-size: 1.15rem; color: #16a34a; text-decoration: none; }
.navbar .links { display: flex; gap: 22px; }
.navbar .links a { color: #4b5563; text-decoration: none; font-size: .95rem; }
.navbar .links a:hover { color: #111; }
/* ===== Hero: flex centered both axes ===== */
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
padding: 56px 24px;
background: linear-gradient(135deg, #d1fae5, #bfdbfe);
}
.hero h1 { font-size: 2rem; }
.hero p { color: #4b5563; max-width: 460px; }
.hero .btn {
background: #16a34a; color: #fff; padding: 11px 22px;
border-radius: 8px; font-weight: 600; text-decoration: none;
}
/* ===== Card row: flex with wrap ===== */
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 880px;
margin: 40px auto;
padding: 0 24px;
}
.card {
flex: 1 1 220px;
background: #fff;
border: 1px solid #e9edf3;
border-radius: 14px;
padding: 22px;
}
.card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.card p { color: #6b7280; font-size: .9rem; }
/* ===== Footer: flex columns ===== */
.footer {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: space-between;
max-width: 880px;
margin: 0 auto;
padding: 36px 24px;
color: #6b7280;
font-size: .88rem;
}
.footer .col { flex: 1 1 160px; }
.footer .col strong { display: block; color: #1f2433; margin-bottom: 8px; }
.footer .col a { display: block; color: #6b7280; text-decoration: none; line-height: 2; }
@media (max-width: 560px) {
.navbar { flex-direction: column; gap: 12px; }
}
</style>
</head>
<body>
<header class="navbar">
<a class="logo" href="#">Flexly</a>
<nav class="links">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">About</a>
</nav>
</header>
<section class="hero">
<h1>Built entirely with Flexbox</h1>
<p>The navbar, this centered hero, the cards below, and the footer all use one tool: <code>display: flex</code>.</p>
<a class="btn" href="#">Get started</a>
</section>
<main class="cards">
<article class="card">
<h3>Flexible rows</h3>
<p>Items line up in a row and share space evenly with flex-grow.</p>
</article>
<article class="card">
<h3>Wrapping</h3>
<p>flex-wrap lets cards drop to the next line on small screens.</p>
</article>
<article class="card">
<h3>Alignment</h3>
<p>justify-content and align-items handle spacing and centering.</p>
</article>
</main>
<footer class="footer">
<div class="col">
<strong>Flexly</strong>
Layout made simple with Flexbox.
</div>
<div class="col">
<strong>Product</strong>
<a href="#">Features</a>
<a href="#">Pricing</a>
</div>
<div class="col">
<strong>Company</strong>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</footer>
</body>
</html>