CSS Tools

CSS Flexbox Generator

Configure a flex container interactively. Toggle direction, alignment, wrapping, and gap while watching the live preview update, then copy the CSS.

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

Flexbox essentials

Flexbox lays out items in a one-dimensional flow (row or column). The container controls direction, spacing, and alignment; each item can optionally override its own alignment with align-self or grow with flex-grow.

display: flex;flex-direction: row | column;justify-content: space-between;align-items: center;

Frequently asked questions

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (horizontal in row, vertical in column). align-items aligns them on the cross axis.

When should I use flex-wrap?

Use flex-wrap: wrap when you want items to flow to the next line instead of overflowing or shrinking when there is not enough space.

What is flex-direction: column?

It makes the main axis vertical, so items stack top-to-bottom instead of left-to-right. justify-content then controls vertical alignment.

What is gap in flexbox?

gap sets the space between flex items without adding margin to outer items. It replaced the old margin workarounds and is well-supported in all modern browsers.

Related CSS tools