Engineering Tool

CSS Flexbox Playground

Experiment with every flexbox property interactively. See how items align and distribute within their container instantly.

Latency Optimized

Client Side

Flex Direction

Justify Content

Align Items

Gap 16px

Flexbox CSS

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