Flexbox Generator

Create CSS Flexbox layouts with a visual editor. Customize direction, wrapping, alignment, and spacing.

Flexbox Settings

Flex Direction

Flex Wrap

Justify Content (Main Axis)

Align Items (Cross Axis)

Align Content (Multi-line)

Gap: 16px

Number of Items

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

flex justify-start items-stretch gap-4