CSS Flexbox Playground

Interactive flexbox layout builder with live preview and CSS output.

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

Frequently Asked Questions

What is CSS Flexbox?

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It provides powerful alignment capabilities and distributes space among items even when their size is unknown or dynamic.

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

justify-content aligns items along the main axis (horizontal in row direction), while align-items aligns items along the cross axis (vertical in row direction). Their axes swap when flex-direction is column.

What does flex-grow do?

flex-grow determines how much a flex item should grow relative to the rest of the flex items when there is extra space available. A value of 0 means the item will not grow, while higher values allocate proportionally more space.

When should I use flex-wrap?

Use flex-wrap: wrap when you want items to flow to the next line if they exceed the container width. By default, flex items try to fit on one line (nowrap), which can cause items to shrink or overflow.

What is flex-basis?

flex-basis sets the initial main size of a flex item before free space is distributed. It can be a length (e.g., 200px, 50%) or "auto", which means the item uses its intrinsic width/height.