Flexbox Lab

Test alignment, distribution, direction, and spacing in one instrument.

Digital lab instrument

Input controls

DirectionDistributionGap16px

1234

Generated formulaAdjust an instrument to begin.

.layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}