Flexbox Playground

Build elastic and responsive layouts with ease.

Container Props

Flex Direction

Justify Content

Align Items

Flex Wrap

Gap16px

CSS Code

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

Main Axis

Cross Axis

Tip: Use gap property to add space between items without margins.