Overview of layout techniques previously only supported within grid- and flexbox contexts, that are now supported for block elements, tables and absolute positioned elements.
| CSS-property | Element types | Applied on | Description | Baseline | CanIUse | Example |
|---|---|---|---|---|---|---|
justify-self |
Block elements and absolute positioned elements | Child | Align single elements on the inline-axis. Alternative to inline-size/width: x and margin-inline: auto/margin: 0 auto. Doesn't work on absolute elements unless inset/inset-inline is set to a value other than auto. Alternatively left and right need to be set to a value other than auto. Spotty browser support |
- | Block elements Absolute positioned elements |
Link |
align-self |
Absolute positioned elements | Child | Align single elements on the block-axis. Doesn't work on absolute positioned elements unless inset/inset-block is set to a value other than auto. Alternatively top and bottom need to be set to a value other than auto |
- | Absolute positioned elements | Link |
place-self |
Block elements (Inline-axis) and absolute positioned elements (both axes) | Child | Shorthand for justify-self and align-self |
- | Block elements Absolute positioned elements |
- |
justify-items |
Block elements and absolute positioned elements | Parent | Align child elements on the inline-axis. Child elements are stacked rather than next to each other. Spotty browser support | - | Block elements Absolute positioned elements |
- |
align-content |
Block elements and table elements | Parent | Align child elements on the block-axis. Alternative to vertical-align in table-headers and table |
2024 | Block elements Table elements |
Link |
| Element type | Applicable CSS-properties that effect the element itself | Applicable CSS-properties that affect child elements* |
|---|---|---|
| Block | justify-self (inline axis, not supported in Firefox and Safari) place-self (inline axis) |
justify-items (inline axis) align-content (block axis) |
| Absolute positioned element | justify-self (inline axis) align-self (block axis) place-self (both axes) |
justify-items (inline-axis) |
| Table cell (th/td) | - | align-content (block-axis) |
* Elements with only text content for example <button>Label</button> are considered parent elements to the text content due to anonymous inline box insertion.