Flexbox Playground

Interactive tool to experiment with CSS Flexbox properties and layouts.

Preview
1
2
3
Result
display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 16px;
Settings
16px
3

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

About this Tool

Flexbox (Flexible Box Layout) is a CSS3 layout mode. It provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items' width/height to best fill the available space.

Frequently Asked Questions