Developer

Flexbox Generator

Use toggles and dropdowns to configure justify-content, align-items, flex-direction, wrap, gap, and individual child flex properties — all with live preview.

Client-sideInstantNo signupFree forever

Children

Demo items in the preview area

CSS Output

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

.container > .item:first-child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 120px;
  align-self: auto;
}