Styling
Comprehensive guide to Taffy's styling properties.
Taffy's styling API is modeled after CSS. Below is a categorized list of all supported properties.
Layout Mode
Core properties that define how a node behaves.
| Property | Description |
|---|---|
display | Flex (default), Grid, or None. |
position | Relative (flow) or Absolute (overlay). |
overflow | Visible, Hidden, or Scroll. |
inset | top, bottom, left, right for positioning. |
Sizing & Spacing
Control dimensions and spacing.
| Property | Description |
|---|---|
size / minSize / maxSize | Width and height control. |
aspectRatio | Ratio between width and height. |
margin | Outer spacing. |
padding | Inner spacing. |
border | Border width (space only). |
gap | Spacing between Flex/Grid items. |
Flexbox Layout
Properties for 1D layouts.
| Property | Description |
|---|---|
flexDirection | Row or Column direction. |
flexWrap | Wrap or NoWrap. |
flexBasis | Initial main size. |
flexGrow | Growth factor. |
flexShrink | Shrink factor. |
justifyContent | Main-axis alignment. |
alignItems | Default cross-axis alignment. |
alignSelf | Override alignment for item. |
alignContent | Align wrapping lines. |
Grid Layout
Properties for 2D layouts.
| Property | Description |
|---|---|
gridTemplate | Define columns and rows. |
gridColumn | Place items in columns. |
gridRow | Place items in rows. |
gridAutoFlow | Auto-placement algorithm. |