CSS Flexbox Playground

Visually explore flexbox properties. Adjust container and item settings, see changes live, and copy ready-to-use CSS.

Container
flex-directionSets the main axis direction. row = left to right, column = top to bottom.
flex-wrapControls whether items wrap to a new line when they overflow the container.
justify-contentDistributes space along the main axis (between and around items).
align-itemsAligns items along the cross axis (perpendicular to main axis).
align-contentDistributes space between rows/columns when there is extra space. Only applies when wrapping.
gap8px
Items (global)
Number of items5
flex-grow0
flex-shrink1
flex-basis
Live PreviewClick an item to override its properties
1
2
3
4
5
CSS Output
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

.item {
  flex: 0 1 auto;
}
Property Reference
flex-direction
Sets the main axis direction. row = left to right, column = top to bottom.
flex-wrap
Controls whether items wrap to a new line when they overflow the container.
justify-content
Distributes space along the main axis (between and around items).
align-items
Aligns items along the cross axis (perpendicular to main axis).
align-content
Distributes space between rows/columns when there is extra space. Only applies when wrapping.
gap
Sets the spacing between flex items.
flex-grow
How much the item should grow relative to other items when extra space is available.
flex-shrink
How much the item should shrink relative to other items when space is limited.
flex-basis
The initial main size of the item before free space is distributed.
align-self
Overrides the container's align-items value for this specific item.