Styling
Comprehensive guide to Taffy's styling properties.
Taffy's styling API is modeled after CSS. Below are the main property groups; the Style API reference lists every exposed property and its accepted values.
Layout Mode
Core properties that define how a node behaves.
| Property | Description |
|---|---|
display | Flex (default), Grid, Block, FlowRoot, or None. |
direction | Ltr (default) or Rtl logical layout direction. |
float / clear | Float placement and clearance in block layout. |
position | Relative (flow) or Absolute (overlay). |
overflow | Visible, Clip, 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, Column, RowReverse, or ColumnReverse. |
flexWrap | Wrap, WrapReverse, 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 |
|---|---|
gridTemplateRows / gridTemplateColumns | Define rows and columns. |
gridTemplateAreas and area counts | Named areas and template dimensions. |
justifyItems / justifySelf | Default and per-item inline alignment. |
gridColumn | Place items in columns. |
gridRow | Place items in rows. |
gridAutoFlow | Auto-placement algorithm. |