Flexbox Generator

Adjust justify-content, align-items, direction, wrap, and gap with a live preview, then copy the generated flexbox CSS.

justify-contentalign-itemsflex-directionflex-wrap

Gap: 12pxItems: 4

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

Example input

justify-content: center

Example output

display: flex; justify-content: center;