HTML and CSS Reference
Table 22-2. Properties that Control the Flexibility of Flex Items
0 1 auto
Shorthand property that sets the individual flex-grow , flex-shrink , and
flex-basis properties in a single declaration. The specification strongly
recommends using the shorthand rather than the individual properties
because it resets unspecified components correctly.
Sets the flex grow ratio expressed as a positive number. This determines
how much the item will grow relative to other flex items when free space
Sets the flex shrink ratio expressed as a positive number. This determines
how much the item will shrink relative to other flex items when there isn't
sufficient space to fit them at their normal size.
Sets the initial main size (see “Understanding Flex Layout Terminology”
earlier in this chapter) of the flex item. Accepts as its value a length,
percentage, or auto . Percentage values are relative to the flex container's
inner main size.
Understanding the flex property is probably the most difficult aspect of flexible layout. The order of values
is significant. They must be a space-separated list in the following order: flex-grow , flex-shrink ,
flex-basis . You can omit one or more values from the flex shorthand, but the rules for doing so are
rather unusual, as explained in the sidebar “Default Values in flex Shorthand.”
DeFaULt VaLUeS IN FLeX ShOrthaND
If you omit the values for flex-grow or flex-basis in the flex shorthand property, the substituted values
are different from the initial values for the independent properties.
If omitted from the
flex shorthand, both the flex grow and flex shrink ratios default to 1 .
If omitted from the shorthand, the
flex-basis component defaults to 0 .
To avoid ambiguity, if you set the
flex-basis component to 0 , it must be preceded by
both the flex grow and flex shrink ratios. Alternatively, you must specify it with a unit,
such as 0px .
flex shorthand property also accepts the keyword none , which is the equivalent of
0 0 auto .
■ The most important aspect of the flex property is that it overrides the flex item's main size—in other
words, its width or height—in order to make it fit into the available space.
The flex-basis component of the flex property can be set to a length or percentage, indicating the flex
item's optimum size. But setting it to zero or auto affects the way the flex grow and flex shrink ratios distribute
space in a subtle, but important way.