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 all the flexible items be the same length, regardless of its content.

But as I've seen it used for other cases, e.g. purposely pushing down sibling element to bottom, does anyone have the knowledge to list useful cases for flex: 1 ?

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: <positive-number>

Equivalent to flex: <positive-number> 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

Answer 2

flex: 1 is short for flex: 1 1 0, and is one of the four flex values that represent most commonly-desired effects:

• flex: initial - Equivalent to flex: 0 1 auto.
• flex: auto - Equivalent to flex: 1 1 auto.
• flex: none - Equivalent to flex: 0 0 auto.
• flex: <positive-number> - Equivalent to flex: <positive-number> 1 0.

Source:

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

---

flex: 1 1 0 is the shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0;

flex-grow: 0; flex-shrink: 1; flex-basis: auto;, or using the shorthand, flex: 0 1 auto, is the default value for a flex item.

---

When it comes to useful cases, a list would be too long, so below is two samples, where the first show how one can make one flex item take the remaining space, and push the other to the right.

.flex-container {
  display: flex;
}

.flex-item {
  background: lightgreen;
}

.flex-item.fill-remaining-space {
  flex: 1;
  background: lightblue;
}

<div class="flex-container">

  <div class="flex-item fill-remaining-space">
    Hey there.
  </div>

  <div class="flex-item">
    This item will be pushed to the right.
  </div>

</div>

And the second how 3 items share the space in their parent equal, regardless of their own content.

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
  border: 1px solid black;
}

<div class="flex-container">

  <div class="flex-item">
    Hey there.
  </div>

  <div class="flex-item">
    This item is wider.
  </div>

  <div class="flex-item">
    This item is the widest of all.
  </div>

</div>

Answer 3

At this detailed guide on the right hand side there is a statement in bold:

"It is recommended that you use this shorthand property rather than set the individual properties. The short hand sets the other values intelligently."

This I have found really is intelligent, meaning based on flex-direction and flex-wrap usually gives the desired result. I only, strictly only manipulate the properties separately by hand if I cannot get it with flex:1 - even if it requires DOM modification. In my opinion it makes your flex-use and the whole CSS more readable and understandable which is inevitable when writing high quality and maintainable code.

To more specifically answer your question (as raised by @TylerH): every single case when you use flex to positioning/sizing then try flex:1 first. In most cases you will find the result satisfying and will leave you with maintainable code. If you need more specific/special positioning only then should you dig deeper into the parameters of flex.