Loading…
Loading…
Visual CSS flexbox playground — build layouts interactively and copy the code.
.container {
display: flex;
}
Click an item in the preview to edit its properties.
Common questions about the Flexbox Playground.
Flexbox (Flexible Box Layout) is a CSS layout model for distributing space and aligning items in a container. It works in one dimension (row or column) and is ideal for navigation bars, card layouts, centering content, and responsive designs.
Use Flexbox for one-dimensional layouts (a row OR a column of items) and Grid for two-dimensional layouts (rows AND columns). Flexbox excels at distributing space among items of unknown size; Grid excels at defining explicit layout regions.
Set the parent to display: flex, then add justify-content: center (horizontal) and align-items: center (vertical). This tool lets you visually experiment with all Flexbox properties and see the CSS output instantly.
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It tells the item to grow and fill available space equally with other flex: 1 siblings. It's the most common way to create equal-width columns.