Interactive CSS Flexbox Generator – Visual Flex Layout Tool

Interactive CSS Flexbox Generator

Visually configure Flexbox properties for containers and items. See the changes live and copy the generated CSS.

Flex Container Settings

flex-direction row row-reverse column column-reverse

flex-wrap nowrap wrap wrap-reverse

justify-content flex-start center flex-end space-between space-around space-evenly

align-items stretch flex-start center flex-end baseline

align-content stretch flex-start center flex-end space-between space-around

Gap (px)

Selected Item Settings

No item selected

order

flex-grow

flex-shrink

flex-basis

align-self auto flex-start flex-end center baseline stretch

Live Preview

Generated CSS

Copied!

Related tools commonly used::