Flexbox Playground

Explore Flexbox direction, alignment, distribution, wrapping, and gap visually.

flex-directionjustify-contentalign-itemsflex-wrap

gap (px): 16Items: 4

Generated CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

flex-direction defines the main axis. justify-content distributes items along it, while align-items controls the cross axis.

gap creates consistent spacing without individual margins. flex-wrap lets items move to another line when space runs out.