Skip to content
Layout

flex

Defines a flex item's grow factor, shrink factor, and basis in one shorthand.

138 effects in the catalog use this property.

Syntax

flex: <grow> <shrink> <basis>;

Watch out

`flex: 1` and `flex: auto` are different: the former uses a zero basis and produces truly equal tracks, while the latter starts from each item's content size.

Common values

1
Share remaining space equally
0 0 auto
Neither grow nor shrink
1 1 0%
Equal columns independent of content width

Effects using flex

These are working effects from the catalog. Open a tile to inspect the full source.