Edit Flex Container

Name

Also known as (comma separated)

Brief definition Parent using Flexbox.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "direction", "type": "select", "label": "flex-direction", "default": "row", "options": [ "row", "column" ] }, { "id": "justify", "type": "select", "label": "justify-content", "default": "flex-start", "options": [ "flex-start", "center", "space-between" ] }, { "id": "align", "type": "select", "label": "align-items", "default": "stretch", "options": [ "stretch", "center", "flex-end" ] }, { "id": "gap", "type": "number", "label": "Gap", "default": 10, "min": 0, "max": 32, "step": 2 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fc-wrap\" role=\"img\" aria-label=\"A flex container with four items, arranged by direction, justify-content and align-items\">\n <div class=\"fc-parent\" style=\"flex-direction:{{direction}};justify-content:{{justify}};align-items:{{align}};gap:{{gap}}px;\">\n <div class=\"fc-item\" style=\"height:36px;\">1</div>\n <div class=\"fc-item\" style=\"height:56px;\">2</div>\n <div class=\"fc-item\" style=\"height:44px;\">3</div>\n </div>\n <p class=\"fc-caption\">direction: {{direction}} &middot; justify-content: {{justify}} &middot; align-items: {{align}} &middot; gap {{gap}}px</p>\n</div>\n<style>\n.fc-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.fc-parent { display: flex; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; min-height: 120px; box-sizing: border-box; }\n.fc-item { background: #A8E6C1; border-radius: 6px; width: 56px; display: flex; align-items: center; justify-content: center; font-weight: 700; }\n.fc-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=\"A flex container with four items, arranged by direction, justify-content and align-items\">\n <div class=\"flex bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 min-h-[120px] box-border\" style=\"flex-direction:{{direction}};justify-content:{{justify}};align-items:{{align}};gap:{{gap}}px;\">\n <div class=\"bg-[#A8E6C1] rounded-md w-14 flex items-center justify-center font-bold\" style=\"height:36px;\">1</div>\n <div class=\"bg-[#A8E6C1] rounded-md w-14 flex items-center justify-center font-bold\" style=\"height:56px;\">2</div>\n <div class=\"bg-[#A8E6C1] rounded-md w-14 flex items-center justify-center font-bold\" style=\"height:44px;\">3</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">direction: {{direction}} &middot; justify-content: {{justify}} &middot; align-items: {{align}} &middot; gap {{gap}}px</p>\n</div>", "react": "export function FlexContainer({\n direction = \"{{direction}}\",\n justify = \"{{justify}}\",\n align = \"{{align}}\",\n gap = {{gap}},\n}) {\n const item = { background: \"#A8E6C1\", borderRadius: 6, width: 56, 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=\"A flex container with four items, arranged by direction, justify-content and align-items\">\n <div style={{ display: \"flex\", flexDirection: direction, justifyContent: justify, alignItems: align, gap,\n background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 12, minHeight: 120, boxSizing: \"border-box\" }}>\n <div style={{ ...item, height: 36 }}>1</div>\n <div style={{ ...item, height: 56 }}>2</div>\n <div style={{ ...item, height: 44 }}>3</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n direction: {direction} &middot; justify-content: {justify} &middot; align-items: {align} &middot; gap {gap}px\n </p>\n </div>\n );\n}" }