Build a CSS flex container visually. Change flex-direction, justify-content, align-items and flex-wrap from the dropdowns, drag the gap slider, and add or remove preview items — the live preview rearranges instantly so you can see exactly how each property behaves before touching your stylesheet. It is a fast way to build intuition for the main-axis and cross-axis alignment properties.
The generated CSS updates as you go and shows the complete display:flex rule you can paste straight into your project, with one-click copy. Properties left at their default value are still included so the rule is self-contained. Everything runs locally in your browser and nothing is uploaded.