CSS layout tools

Flexbox Playground

Easily learn and test CSS Flexbox layouts through an interactive visual interface. Instant preview, immediate output of CSS and HTML, all operations performed purely on the front end.

Container settings
flex-direction
justify-content
align-items
flex-wrap
align-content
Gap
Flex ItemsEdit
Commonly used styles
Instant preview
1
2
3
display: flex;\nflex-direction: row;\njustify-content: flex-start;\nalign-items: stretch;

Features

Container complete settings
Justify/Align control
Flex Wrap and Gap
Item individual attribute editing
Instant interactive preview
Generate CSS and HTML
20+ commonly used Presets
Copy code with one click
Responsive preview
Add/Delete Item
Undo/Redo
Pure front-end offline execution

Flexbox basic tutorial

CSS Flexbox is a one-dimensional layout model that allows elements within a container to automatically adjust size, order, and alignment based on available space.

Container Properties

  • flex-direction — Spindle direction
  • justify-content — Spindle alignment
  • align-items — cross-axis alignment
  • flex-wrap — Line break mode
  • align-content — Align multiple lines
  • gap — Item spacing

Item property

  • flex-grow — Magnification ratio
  • flex-shrink — Shrink ratio
  • flex-basis — initial size
  • order — sort order
  • align-self — individual alignment

Common typography examples

center horizontally
Center vertically
Navigation bar
card list
sidebar
Equal width fields

Frequently Asked Questions

What is CSS Flexbox?
CSS Flexbox (flexible box model) is a one-dimensional layout mode provided by CSS3. It allows the container to efficiently allocate space and align items within it, even if the dimensions of the items are unknown or dynamic. Flexbox is great for creating common layouts such as responsive designs, navigation bars, and card lists.
What is the difference between justify-content and align-items?
justify-content The control items are in Spindle(flex-direction) alignment, while align-items The control items are in cross axis(direction perpendicular to the main axis). When flex-direction is row, justify-content controls horizontal alignment and align-items controls vertical alignment.
How do flex-grow and flex-shrink work?
flex-grow Defines the enlargement ratio of the item when there is free space in the container. The default is 0 (no enlargement).flex-shrink Defines the shrinkage ratio of the project when there is insufficient space. The default is 1 (shrinkable). When the sum of the grow values ​​of all items is greater than 0, the remaining space is allocated proportionally.
What does flex-wrap do?
When the total width of the items in the container exceeds the container width,flex-wrap: wrap It will automatically wrap items to the next line instead of forcing them to be compressed into one line. This is very useful when building responsive card lists.
Is this tool free?
Yes, it's completely free, no registration required. All processing is performed locally in your browser - no data is sent to the server, and your layout settings are never exported.

Browser compatibility

Chrome 29+
Firefox 28+
Safari 9+
Edge 12+
Opera 17+
iOS Safari 9+
Android 4.4+
IE 11+

Privacy Statement

This tool executes entirely in your browser. Any layouts, item settings, or styles you create will not be sent to any server. All work stays on your device. We do not use cookies or tracking with this tool.