Flexbox Playground

Flexbox (Flexible Box Layout) is a CSS layout model that distributes space among items in a container. It handles one-dimensional layouts — either rows or columns — making it ideal for navigation bars, card layouts, form layouts, and centering content.

justify-content controls alignment along the main axis (horizontal in row direction, vertical in column direction). align-items controls alignment along the cross axis (the perpendicular direction). Together they give you full control over item placement.

Use Flexbox for one-dimensional layouts where items flow in a single row or column — navigation bars, button groups, centering. Use Grid for two-dimensional layouts where you need control over both rows and columns simultaneously — page layouts, dashboards, image galleries.

flex-grow controls how much an item grows relative to other items when there is extra space in the container. A value of 0 means the item will not grow. A value of 1 means it takes an equal share of extra space. Higher values take proportionally more space.

flex-basis sets the initial size of a flex item before flex-grow and flex-shrink are applied. It can be a length (200px), a percentage (25%), or auto (uses the item content or width/height). Think of it as the starting point for size calculations.

By default (nowrap), flex items try to fit on one line and will shrink to do so. Setting wrap allows items to flow onto multiple lines when the container is too narrow. wrap-reverse does the same but in the opposite direction.

The presets include: centered single item, navbar (logo/nav/actions), sidebar layout, card grid, holy grail (header/sidebar/main/sidebar/footer), footer columns, vertical stack, equal columns, centered grid, reverse order, and a masonry-style layout.

Yes. The CSS output updates in real time as you change settings. Click the Copy CSS button to copy the complete container and item styles to your clipboard. Only non-default properties are included to keep the output clean.