What Next? - Beginning CSS3 - page 491

Table 22-2. Properties that Control the Flexibility of Flex Items

Property Initial Value Description

flex 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.

flex-grow 0 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
is distributed.

flex-shrink 1 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.

flex-basis auto 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 .

• The 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.

Tip

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.