This is the Standard reference for alignments.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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