Back

Flexbox Playground

★

flex-direction

flex-wrap

justify-content

align-items

align-content

Items

.container { display: flex; }

How it works

Learn and test CSS Flexbox layouts interactively with direct visual feedback.

Change the properties of the flex container (such as 'justify-content' or 'align-items') via the control bar. You will immediately see how the arrangement of the boxes in the playground changes. The generated CSS code is displayed live and can be used for your own web projects.

Processing happens entirely locally in your browser.

Relevant Tools

Chmod Calculator

Easily calculate Linux file permissions (chmod) in numeric and symbolic formats.

Open

Device Info

Displays detailed information about your current device, browser, screen, and more.

Open

DNS-over-HTTPS Lookup

Query DNS records (A, AAAA, MX, TXT, etc.) securely over HTTPS directly from your browser.

Open