flex-grow

No. 09 · SVG · Bench vise

Drag the jawtap a block

A bench vise holding three spring-loaded blocks. Each block carries one spring per point of flex-grow, so every spring takes the same share of the free space.

Prompt

/anatomy explain how flex-grow shares space in CSS flexbox, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { FlexGrow } from "anatomy-figures";

<FlexGrow theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import FlexGrow from "anatomy-figures/flex-grow";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<FlexGrow
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/flex-grow";

define();

<anatomy-flex-grow theme="light"></anatomy-flex-grow>