How to Use CSS Flexbox
Flexbox is the most important CSS layout system for arranging items in rows and columns. But memorizing what justify-content vs. align-items does is hard without seeing it. This interactive playground lets you experiment visually and copy the CSS.
Try Flexbox Playground Now
Free, no signup. Works in your browser.
Set up the flex container
The playground starts with a flex container and several child items. Use the controls to set `display: flex` properties on the container — direction, wrapping, and alignment.
Choose flex-direction
Toggle between row, row-reverse, column, and column-reverse. This sets the main axis along which items are laid out. Row is the default and flows items left to right.
Adjust alignment properties
Set justify-content (main axis: flex-start, center, flex-end, space-between, space-around, space-evenly) and align-items (cross axis: stretch, flex-start, center, flex-end, baseline). Watch the items move in real time.
Configure individual item properties
Click on any child item to set its flex-grow, flex-shrink, flex-basis, align-self, and order values. This lets you see how individual items override the container defaults.
Enable wrapping
Set flex-wrap to 'wrap' and resize the container to see how items flow to the next line. Combine with align-content to control the spacing between wrapped lines.
Copy the generated CSS
The complete CSS for both the container and items is displayed in a code panel. Copy it directly into your project — no need to translate visual settings to code manually.
Pro Tips
- *Use `gap` instead of margins between flex items — it is cleaner and only applies spacing between items, not at the edges.
- *For centering a single element both horizontally and vertically: `display: flex; justify-content: center; align-items: center;`.
- *Remember: justify-content aligns along the main axis, align-items along the cross axis. The axes swap when flex-direction is column.
- *Use flex-shrink: 0 on items that should never shrink below their natural width (like icons or fixed sidebars).
- *Consider CSS Grid for two-dimensional layouts — Flexbox is best for one-dimensional (row or column) arrangements.
Related Guides
How to Build CSS Gradients
Create beautiful CSS linear, radial, and conic gradients with a visual editor. Adjust colors, stops, angles, and copy production-ready CSS code.
How to Convert Color Formats
Convert colors between HEX, RGB, HSL, CMYK, and CSS named colors. Includes a color picker and accessibility contrast checker.
How to Generate Meta Tags for SEO
Generate complete meta tags for SEO, Open Graph, Twitter Cards, and structured data. Preview how your page appears in Google, Facebook, and Twitter.