This is the Standard reference for flexbox.
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.
flex
Interactive example. Rule type: shorthand.
Prefixes: flex. Example: flex:1. It emits flex:1 1 0%;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
1, none, auto, 2, [2_2_0%], $x
flex-direction
Interactive example.
Prefixes: flex-direction. Example: flex-direction:row. It emits flex-direction:row;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
row, row-reverse, column, column-reverse
flex-wrap
Interactive example.
Prefixes: flex-wrap. Example: flex-wrap:wrap. It emits flex-wrap:wrap;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
wrap, nowrap, wrap-reverse
flex-basis
Interactive example.
Prefixes: flex-basis. Example: flex-basis:auto. It emits flex-basis:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (32)
auto, content, min, max, fit, stretch, contain, px, 1c, 2c, 3c, 4c,
5c, 6c, 7c, 8c, 9c, 1x, 2x, 3x, 4x, 5x, 6x, 7x,
8x, 9x, 2, 1/2, 2/3, 100%, [10px], $basis
flex-grow
Interactive example.
Prefixes: flex-grow. Example: flex-grow:0. It emits flex-grow:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
0, 1, 2, [--factor], $factor
flex-shrink
Interactive example.
Prefixes: flex-shrink. Example: flex-shrink:0. It emits flex-shrink:0;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
0, 1, 2, [--factor], $factor
order
Interactive example.
Prefixes: order. Example: order:first. It emits order:calc(-infinity);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
first, last, 0, 1, -2, [3], $order