Flexbox Playground API

Generate flexbox CSS and HTML for a container and its items (direction, wrap, justify, align, gaps, and per-item flex, align-self and order). Defaults are left out of the CSS.

Experiment with CSS flexbox: set direction, wrap, justify-content, align-items and gap, tweak grow, shrink, basis and order per item, and copy the CSS.

Input

Send these as a JSON object. Unknown fields are rejected.

flexDirection

flex-direction. (string, one of row, row-reverse, column, column-reverse, default "row")

flexWrap

flex-wrap. (string, one of nowrap, wrap, wrap-reverse, default "nowrap")

justifyContent

justify-content. (string, one of flex-start, flex-end, center, space-between, space-around, space-evenly, default "flex-start")

alignItems

align-items. (string, one of stretch, flex-start, flex-end, center, baseline, default "stretch")

alignContent

align-content (only matters when wrapping). (string, one of normal, flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, default "normal")

rowGap

Row gap in px. (number, 0 to 200, default 8)

columnGap

Column gap in px. (number, 0 to 200, default 8)

itemCount

Number of items with default settings, when items is not given. (integer, 1 to 12, default 3)

items

Per-item settings as a JSON array (1 to 12), each {"grow":0,"shrink":1,"basis":"auto","alignSelf":"auto","order":0}; missing keys use those defaults. basis is auto, content or a length such as 120px or 25%. alignSelf is one of auto, flex-start, flex-end, center, baseline, stretch. (string, up to 5000 characters)