Flexbox Playground

Interactively explore all CSS Flexbox properties with a live visual preview.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap8px

Items

Height300px

CSS (container)

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;

This shows the container properties. Individual items can be customized with flex-grow, flex-shrink, flex-basis, and align-self.