Flexbox Playground

Master flexbox with interactive visual controls

Container Properties

Display

Flex Direction

Flex Wrap

Justify Content

Align Items

Align Content

Gap

Column Gap

Row Gap

Container Width

Min Height

Padding

Presets

Items

Preview

Item 1

Item 2

Item 3

Main Axis

Horizontal

Cross Axis

Vertical

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
  padding: 20px;
}