News Blogs Tools Score

Flexbox Playground

Adjust flex-direction, justify-content, align-items, flex-wrap, and gap on a live set of boxes, then copy the generated Flexbox CSS.

Written by code.liveHow we review content

flex-direction

justify-content

align-items

flex-wrap

Gap12px

1

2

3

4

5

CSScss

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

CSS toolkit

Full CSS hub →

Generators and formatters for gradients, layout, shadows, and CSS cleanup.

Keep learning

Sources

Primary references for claims on this page