Flexbox Playground

Visual flexbox layout builder with code export

Configuration

Flex Direction

Justify Content

Align Items

Flex Wrap

Gap

Number of Items

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 16px;