Edit Flexbox

Name

Also known as (comma separated)

Brief definition One-dimensional CSS layout system.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "direction", "type": "select", "label": "Main axis", "default": "row", "options": [ "row", "row-reverse", "column" ] }, { "id": "justify", "type": "select", "label": "justify-content (main axis)", "default": "space-between", "options": [ "flex-start", "center", "space-between" ] }, { "id": "align", "type": "select", "label": "align-items (cross axis)", "default": "center", "options": [ "flex-start", "center", "flex-end" ] }, { "id": "wrap", "type": "toggle", "label": "Allow wrapping", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fb-wrap\" role=\"img\" aria-label=\"Five flexbox items arranged along a main axis and cross axis, position driven by the controls\">\n <div class=\"fb-parent\" style=\"flex-direction:{{direction}};justify-content:{{justify}};align-items:{{align}};flex-wrap:{{#if wrap}}wrap{{/if}}{{#unless wrap}}nowrap{{/unless}};\">\n <div class=\"fb-item\">1</div>\n <div class=\"fb-item\">2</div>\n <div class=\"fb-item\">3</div>\n <div class=\"fb-item\">4</div>\n <div class=\"fb-item\">5</div>\n </div>\n <p class=\"fb-caption\">main axis: {{direction}} &middot; justify-content: {{justify}} &middot; align-items: {{align}} &middot; wrap: {{#if wrap}}yes{{/if}}{{#unless wrap}}no{{/unless}}</p>\n</div>\n<style>\n.fb-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.fb-parent { display: flex; gap: 8px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; min-height: 140px; box-sizing: border-box; }\n.fb-item { background: #BFD9F2; border-radius: 6px; width: 76px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; }\n.fb-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[320px]\" role=\"img\" aria-label=\"Five flexbox items arranged along a main axis and cross axis, position driven by the controls\">\n <div class=\"flex gap-2 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 min-h-[140px] box-border\" style=\"flex-direction:{{direction}};justify-content:{{justify}};align-items:{{align}};flex-wrap:{{#if wrap}}wrap{{/if}}{{#unless wrap}}nowrap{{/unless}};\">\n <div class=\"bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold\">1</div>\n <div class=\"bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold\">2</div>\n <div class=\"bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold\">3</div>\n <div class=\"bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold\">4</div>\n <div class=\"bg-[#BFD9F2] rounded-md w-[76px] h-10 shrink-0 flex items-center justify-center font-bold\">5</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">main axis: {{direction}} &middot; justify-content: {{justify}} &middot; align-items: {{align}} &middot; wrap: {{#if wrap}}yes{{/if}}{{#unless wrap}}no{{/unless}}</p>\n</div>", "react": "export function Flexbox({\n direction = \"{{direction}}\",\n justify = \"{{justify}}\",\n align = \"{{align}}\",\n wrap = {{wrap}},\n}) {\n const item = { background: \"#BFD9F2\", borderRadius: 6, width: 76, height: 40, flexShrink: 0, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"Five flexbox items arranged along a main axis and cross axis, position driven by the controls\">\n <div style={{ display: \"flex\", gap: 8, flexDirection: direction, justifyContent: justify, alignItems: align,\n flexWrap: wrap ? \"wrap\" : \"nowrap\", background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 12, minHeight: 140, boxSizing: \"border-box\" }}>\n <div style={item}>1</div><div style={item}>2</div><div style={item}>3</div><div style={item}>4</div><div style={item}>5</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n main axis: {direction} &middot; justify-content: {justify} &middot; align-items: {align} &middot; wrap: {wrap ? \"yes\" : \"no\"}\n </p>\n </div>\n );\n}" }