Free Online Tool

CSS Flexbox Generator

Visually configure flexbox layouts and get the generated CSS instantly. Adjust container and item properties with live preview.

Container

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

Items

Number of items

flex-grow

flex-shrink

flex-basis

Item height (px)

Live Preview

Generated CSS

CSS Flexbox Generator

Flexbox is a one-dimensional CSS layout model that distributes space and aligns items in a container. Use this generator to visually configure every flexbox property and copy the ready-to-use CSS.

Key Flexbox Properties

flex-direction — sets the main axis (row or column)
justify-content — aligns items along the main axis
align-items — aligns items along the cross axis
flex-wrap — controls whether items wrap onto multiple lines
gap — sets the spacing between flex items
flex-grow / flex-shrink — controls how items grow or shrink relative to available space