style-properties.md
Style Properties
Y = Supported in spec and implemented in Taffy ~Y = Implemented in Taffy, but not thoroughly tested N = Supported in spec but not implemented in Taffy - = Not applicable to layout mode 1-5 = Priorities for a phased implementation of CSS Grid
| Property | Flex | Grid | Type | Stack | Heap | Description |
|---|---|---|---|---|---|---|
| Layout Mode | ||||||
display | Y | Y | Display | 1 | - | What layout strategy should be used? |
| Position | - | |||||
position | Y | Y | Position | 1 | - | Absolute vs. in-flow position |
inset | Y | Y | Rect<LengthPercentageAuto> | 32 | - | How should the position of this element be tweaked relative to the layout defined? |
| Item size | ||||||
size | Y | Y | Size<Dimension> | 16 | - | The nominal height and width of item |
min_size | Y | Y | Size<Dimension> | 16 | - | The minimum height and width of the item |
max_size | Y | Y | Size<Dimension> | 16 | - | The maximum height and width of the item |
aspect_ratio | Y | 3 | Option<f32> | 4 | - | The preferred aspect ratio (calculated as width divided by height) |
| Item spacing | ||||||
padding | Y | ~Y | Rect<LengthPercentage> | 32 | - | How large should the padding be on each side? |
border | Y | ~Y | Rect<LengthPercentage> | 32 | - | How large should the border be on each side? |
margin | Y | ~Y | Rect<LengthPercentageAuto> | 32 | - | How large should the margin be on each side? |
gap | Y | Y | Size<LengthPercentage> | 16 | - | The size of the vertical and horizontal gaps between flex items / grid rows |
| Alignment | ||||||
align_content | Y | Y | AlignContent | 1 | - | How should content contained within this item be aligned relative to the cross axis? |
justify_content | Y | Y | AlignContent | 1 | - | How should content contained within this item be aligned relative to the main axis? |
align_items | Y | Y | AlignItems | 1 | - | How should items be aligned relative to the cross axis? |
align_self | Y | Y | Option<AlignItems> | 1 | - | Should this item violate the cross axis alignment specified by its parent's [AlignItems]? |
justify_items | - | Y | AlignItems | 1 | - | How should items be aligned relative to the main axis? |
justify_self | - | Y | Option<AlignItems> | 1 | - | Should this item violate the main axis alignment specified by its parent's [AlignItems]? |
| Flexbox | ||||||
flex_direction | Y | - | FlexDirection | 1 | - | Which direction does the main axis flow in? |
flex_wrap | Y | - | FlexWrap | 1 | - | Should elements wrap, or stay in a single line? |
flex_basis | Y | - | Dimension | 8 | - | Sets the initial main axis size of the item |
flex_grow | Y | - | f32 | 4 | - | The relative rate at which this item grows when it is expanding to fill space |
flex_shrink | Y | - | f32 | 4 | - | The relative rate at which this item shrinks when it is contracting to fit into space |
| CSS Grid (Container) | ||||||
grid_template_columns | - | Y | Vec<TrackSizingFunction> | 24 | 32 * N | The track sizing functions of the grid's explicit columns |
grid_template_rows | - | Y | Vec<TrackSizingFunction> | 24 | 32 * N | The track sizing functions of the grid's explicit rows |
grid_template_areas | - | 5 | - | - | - | Defines named grid areas |
grid_auto_rows | - | Y | Vec<NonRepeatedTrackSizingFunction> | 24 | 20 * N | Track sizing functions for the grid's implicitly generated rows |
grid_auto_columns | - | Y | Vec<NonRepeatedTrackSizingFunction> | 24 | 20 * N | Track sizing functions for the grid's implicitly generated columns |
grid_auto_flow | - | Y | GridAutoFlow | 1 | - | Whether auto-placed items are placed row-wise or column-wise. And sparsely or densely. |
| CSS Grid (Child) | ||||||
grid_row | - | Y | Line<GridPlacement> | 8 | - | The vertical (row) placement of a grid item |
grid_column | - | Y | Line<GridPlacement> | 8 | - | The horizontal (row) placement of a grid item |
grid_area | - | 5 | - | - | - | Accepts either shorthand row/column-start/end or a named grid area |