This is the Standard reference for alignments.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
justify-content
Interactive example.
Prefixes: juc. Example: juc:center. It emits justify-content:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (14)
center, safe-center, start, end, flex-start, flex-end, safe-end, normal, space-between, space-around, space-evenly, stretch,
[safe_start], $alignment
justify-items
Interactive example.
Prefixes: jui. Example: jui:center. It emits justify-items:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
center, safe-center, start, end, safe-end, normal, stretch, [legacy_center], $alignment
justify-self
Interactive example.
Prefixes: jus. Example: jus:auto. It emits justify-self:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
auto, center, safe-center, start, end, safe-end, stretch, [self-start], $alignment
align-content
Interactive example.
Prefixes: alc. Example: alc:center. It emits align-content:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
center, start, end, flex-start, flex-end, normal, space-between, space-around, space-evenly, baseline, stretch, [safe_center],
$alignment
align-items
Interactive example.
Prefixes: ali. Example: ali:center. It emits align-items:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
center, safe-center, start, end, flex-start, flex-end, safe-end, baseline, last, stretch, [unsafe_end], $alignment
align-self
Interactive example.
Prefixes: als. Example: als:auto. It emits align-self:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
auto, center, safe-center, start, end, flex-start, flex-end, safe-end, baseline, last, stretch, [self-start],
$alignment
place-content
Interactive example.
Prefixes: plc. Example: plc:center. It emits place-content:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (11)
center, safe-center, start, end, safe-end, space-between, space-around, space-evenly, stretch, [center_space-between], $alignment
place-items
Interactive example.
Prefixes: pli. Example: pli:center. It emits place-items:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
center, safe-center, start, end, safe-end, baseline, stretch, [normal_stretch], $alignment
place-self
Interactive example.
Prefixes: pls. Example: pls:auto. It emits place-self:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
auto, center, safe-center, start, end, safe-end, stretch, [auto_center], $alignment