The meaning and benefits of flex: 1

Question

I stumbled upon flex: 1 today in some code and googled it to get some information about what it does. w3schools succinctly states:

Let al

Answer 1

The CSS border, padding and margin properties are all shorthand properties. This means they consolidate multiple properties into one.

The CSS flex property is no different. It's simply a shorthand way to consolidate:

• flex-grow
• flex-shrink
• flex-basis

So, use the flex property for the same reason you would use any other CSS shorthand property:

• to minimize your code
• reset/change default values

In terms of function, there's nothing unique about the flex property. Anything that the flex property can do, can also be done using a combination of the longhand properties.

For example:

flex: 2 1 250px

is exactly the same as:

• flex-grow: 2
• flex-shrink: 1
• flex-basis: 250px

The flexbox spec then takes "shorthanding" a step further, defining an even shorter shorthand:

flex:

Equivalent to flex: 1 0.

Makes the flex item flexible and sets the flex basis to zero.

^{http://www.w3.org/TR/css-flexbox-1/#flex-common}

Here's a list of commonly used flex shorthand rules:

• https://www.w3.org/TR/css-flexbox-1/#flex-common

The spec also makes this recommendation:

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

^{http://www.w3.org/TR/css-flexbox-1/#flex-components}

Here's a related post with more info:

• Understanding the flex property