Stax

CSS Flexbox Playground

Experiment with Flexbox properties visually and copy the CSS.

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Learn Flexbox by experimenting

The best way to understand CSS Flexbox is to see it in action. Adjust the flex-direction, justify-content, align-items, flex-wrap, align-content, and gap properties and watch the layout update in real time.

Copy ready-to-use CSS

Once you have the layout you want, copy the generated CSS with one click and paste it directly into your project. No more guessing which combination of properties produces the layout you need.

Frequently asked questions

What is CSS Flexbox?
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It makes it easy to distribute space and align items in a container, even when their sizes are unknown or dynamic.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (row = horizontal, column = vertical). align-items controls alignment along the cross axis (perpendicular to the main axis). Together they position items both horizontally and vertically.
When should I use flex-wrap: wrap?
Use flex-wrap: wrap when you want items to wrap onto a new line when they don't fit in one row. Without wrapping, items either shrink to fit or overflow the container.
What does align-content do?
align-content distributes space between rows of a multi-line flex container (only applies when flex-wrap is wrap or wrap-reverse and there are multiple lines). It has no effect on single-line containers.
How do I centre an element with Flexbox?
Set display: flex on the parent, then use justify-content: center and align-items: center. This centres the child element both horizontally and vertically inside the parent.

Related tools