Edit Flex Item

Name

Also known as (comma separated)

Brief definition Child within Flexbox.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "grow", "type": "number", "label": "flex-grow (item 2)", "default": 1, "min": 0, "max": 3, "step": 1 }, { "id": "basis", "type": "select", "label": "flex-basis (item 2)", "default": "auto", "options": [ "auto", "40px", "50%" ] }, { "id": "alignSelf", "type": "select", "label": "align-self (item 2)", "default": "center", "options": [ "flex-start", "center", "flex-end" ] }, { "id": "order", "type": "number", "label": "order (item 2)", "default": 0, "min": -1, "max": 2, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fi-wrap\" role=\"img\" aria-label=\"A flex row of three items; the highlighted middle item's grow, basis, align-self and order are adjustable\">\n <div class=\"fi-parent\">\n <div class=\"fi-item\">1</div>\n <div class=\"fi-item fi-item--target\" style=\"flex-grow:{{grow}};flex-basis:{{basis}};align-self:{{alignSelf}};order:{{order}};\">2 (target)</div>\n <div class=\"fi-item\">3</div>\n </div>\n <p class=\"fi-caption\">grow: {{grow}} &middot; basis: {{basis}} &middot; align-self: {{alignSelf}} &middot; order: {{order}}</p>\n</div>\n<style>\n.fi-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.fi-parent { display: flex; gap: 10px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; min-height: 100px; box-sizing: border-box; }\n.fi-item { background: #A8E6C1; border-radius: 6px; padding: 10px; min-width: 40px; display: flex; align-items: center; justify-content: center; font-weight: 600; text-align: center; }\n.fi-item--target { background: #F5C2E0; font-weight: 700; }\n.fi-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 row of three items; the highlighted middle item's grow, basis, align-self and order are adjustable\">\n <div class=\"flex gap-2.5 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 min-h-[100px] box-border\">\n <div class=\"bg-[#A8E6C1] rounded-md p-2.5 min-w-[40px] flex items-center justify-center font-semibold text-center\">1</div>\n <div class=\"bg-[#F5C2E0] rounded-md p-2.5 min-w-[40px] flex items-center justify-center font-bold text-center\" style=\"flex-grow:{{grow}};flex-basis:{{basis}};align-self:{{alignSelf}};order:{{order}};\">2 (target)</div>\n <div class=\"bg-[#A8E6C1] rounded-md p-2.5 min-w-[40px] flex items-center justify-center font-semibold text-center\">3</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">grow: {{grow}} &middot; basis: {{basis}} &middot; align-self: {{alignSelf}} &middot; order: {{order}}</p>\n</div>", "react": "export function FlexItem({\n grow = {{grow}},\n basis = \"{{basis}}\",\n alignSelf = \"{{alignSelf}}\",\n order = {{order}},\n}) {\n const item = { background: \"#A8E6C1\", borderRadius: 6, padding: 10, minWidth: 40, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 600, textAlign: \"center\" };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"A flex row of three items; the highlighted middle item's grow, basis, align-self and order are adjustable\">\n <div style={{ display: \"flex\", gap: 10, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 12, minHeight: 100, boxSizing: \"border-box\" }}>\n <div style={item}>1</div>\n <div style={{ ...item, background: \"#F5C2E0\", fontWeight: 700, flexGrow: grow, flexBasis: basis, alignSelf, order }}>2 (target)</div>\n <div style={item}>3</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n grow: {grow} &middot; basis: {basis} &middot; align-self: {alignSelf} &middot; order: {order}\n </p>\n </div>\n );\n}" }