{"ok":true,"result":{"slug":"flexbox-playground","name":"Flexbox Playground","summary":"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.","description":"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.","method":"POST","endpoint":"/api/v1/tools/flexbox-playground","plan":"free","mcpName":"flexbox_playground","input":{"type":"object","additionalProperties":false,"properties":{"flexDirection":{"type":"string","description":"flex-direction.","default":"row","enum":["row","row-reverse","column","column-reverse"],"maxLength":200000},"flexWrap":{"type":"string","description":"flex-wrap.","default":"nowrap","enum":["nowrap","wrap","wrap-reverse"],"maxLength":200000},"justifyContent":{"type":"string","description":"justify-content.","default":"flex-start","enum":["flex-start","flex-end","center","space-between","space-around","space-evenly"],"maxLength":200000},"alignItems":{"type":"string","description":"align-items.","default":"stretch","enum":["stretch","flex-start","flex-end","center","baseline"],"maxLength":200000},"alignContent":{"type":"string","description":"align-content (only matters when wrapping).","default":"normal","enum":["normal","flex-start","flex-end","center","space-between","space-around","space-evenly","stretch"],"maxLength":200000},"rowGap":{"type":"number","description":"Row gap in px.","default":8,"minimum":0,"maximum":200},"columnGap":{"type":"number","description":"Column gap in px.","default":8,"minimum":0,"maximum":200},"itemCount":{"type":"integer","description":"Number of items with default settings, when items is not given.","default":3,"minimum":1,"maximum":12},"items":{"type":"string","description":"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.","maxLength":5000}}},"example":{"justifyContent":"space-between","alignItems":"center","items":"[{\"grow\":1},{\"grow\":2,\"basis\":\"0%\"},{}]"},"randomOutput":false,"network":false,"docs":"https://pithlab.com/developers/tools/flexbox-playground","page":"https://pithlab.com/tools/flexbox-playground"}}