Flexbox Generator

Visual Flexbox layout builder with all flex properties. See changes in real-time.

Container Settings

16px

Flex Items (3)

1
Item 1grow: 0, shrink: 1
2
Item 2grow: 0, shrink: 1
3
Item 3grow: 0, shrink: 1

Presets

Preview Colors

Preview

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

Ready to launch your website?

Get professional hosting from $2.99/mo with free domain and SSL.

Get Hostinger Try Vercel Free