Flexbox Playground

Visualize CSS Flexbox properties interactively — adjust and copy the CSS.

1
2
3
4
5
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;

Flexbox Playground — What It Does

Adjust every CSS Flexbox property — direction, wrap, justify-content, align-items, align-content, and gap — and instantly see how flex items respond in a live preview. Copy the generated CSS directly into your project. Perfect for learning Flexbox visually or quickly testing layout ideas without touching your codebase.

Flexbox Container Properties

  • flex-direction — row | row-reverse | column | column-reverse
  • flex-wrap — nowrap | wrap | wrap-reverse
  • justify-content — flex-start | center | flex-end | space-between | space-around
  • align-items — stretch | flex-start | center | flex-end | baseline
  • gap — Spacing between items (replaces margin hacks)

Common Flexbox Patterns

  • Perfect centering — justify-content: center; align-items: center
  • Navbar layout — justify-content: space-between; align-items: center
  • Equal columns — Each child: flex: 1
  • Responsive card grid — flex-wrap: wrap with fixed flex-basis

Flexbox vs CSS Grid

Flexbox is one-dimensional — it manages layout in either a row or a column at a time, making it ideal for navigation bars, toolbars, and component-level alignment. CSS Grid is two-dimensional and better for full-page layouts where you need to control both rows and columns simultaneously. In practice, both are used together.

Frequently Asked Questions

What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (the direction flex items flow — horizontal by default), while align-items controls alignment along the cross axis (perpendicular to the main axis). When flex-direction is row, justify-content is horizontal and align-items is vertical.
When should I use flex-wrap: wrap?
Use flex-wrap: wrap when you want flex items to move to a new line rather than shrink when the container is too narrow. This is essential for responsive layouts where items should stack naturally on small screens instead of overflowing or becoming too small to read.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It tells the item to grow and shrink equally with siblings to fill available space. All items with flex: 1 in the same container will share the space equally.
How do I center an element both horizontally and vertically with Flexbox?
Apply display: flex; justify-content: center; align-items: center; to the parent container. This is the simplest and most reliable centering technique in modern CSS, replacing the old negative-margin and absolute-positioning hacks.
What is the difference between align-items and align-content?
align-items aligns items within a single flex line (row), while align-content aligns multiple lines relative to the container when flex-wrap is enabled and there is extra space. align-content has no effect if all items fit on one line.