Flexbox lab

Adjust the container properties, inspect the layout and copy the CSS.

Container properties

DirectionMain-axis distributionCross-axis alignmentWrappingGap (px)16Item basis (px)80Number of items4

LIVE PREVIEWMAIN AXIS →

In a row, justify-content distributes space horizontally. align-items handles the vertical cross axis.

TRY A LAYOUT

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

.layout > * {
  flex: 0 0 80px;
  min-width: 60px;
  min-height: 54px;
}

Items keep their basis and do not shrink. The preview adds padding, colors and a fixed height for comparison.

No account needed. Your shared link stores only the control values.

Understanding the axes

The main axis follows flex-direction; the cross axis runs across it. Switch to column to see how justify-content changes direction. Add items to compare wrap and nowrap.

Read the Flexbox lesson

Go deeper: MDN Flexbox concepts ↗ · When should you use Grid instead?

Flexbox lab

Container properties

Your CSS

Understanding the axes