The Flex Shorthand Doesn't Play Nice

So many people jump straight to using the flex shorthand property right away and fall face first into the most common flexbox pitfall.

.all-the-things {
  flex: 1 0 300px;
}

This one shorthand sets flex-grow, flex-shrink, and flex-basis all in one. The first problem people have with this shorthand is not fully understanding all of those underlying properties being set. You're better off treating the flex shorthand as a convenience tool once you (and your team) have reached master proficiency with flexbox. Once you're there, just remember grow, shrink, basis in that order.

Changing Defaults

Besides needing to understand all of flexbox, a big gotcha with this shorthand is that it sets different defaults. This can bite you in a couple of ways. Say you're using flex to set just the flex-basis for an item:

.container {
  display: flex;
}

.item {
  height: 200px;
  border: 10px solid;
  border-color: rgba(0,0,0,.3);
  /* setting just the basis also changed the flex-grow to 1 */
  flex: 30px;
}

.blue{ background: blue;}
.purple{ background: rebeccapurple;}

This set the flex-basis to 30px like we told it to, but it also changed the flex-grow from 0 to 1 implicitly, making the items grow unexpectedly. If you're going to use this shorthand, remember that its default is flex-grow: 1 where the usual flexbox default is flex-grow: 0.

Another default that gets changed if you leave it off is flex-basis. Say you're using flex to set just the flex-grow and flex-shrink properties, telling it to neither grow nor shrink:

.container {
  display: flex;
}

.item {
  height: 200px;
  width: 200px;
  border: 10px solid;
  border-color: rgba(0,0,0,.3);
  /* setting just the flex-grow and flex-shrink, made it also set flex-basis to 0 */
  flex: 0 0;
}

.red{ background: red; }
.blue{ background: blue;}
.green{ background: green;}
.grey{ background: grey;}
.purple{ background: rebeccapurple;}

Even though we didn't tell it to, this also changed the item's flex-basis from its usual default of auto to a new value of 0. This new value made our items no longer take up any horizontal space (besides border size) despite have a width declared. To understand why see the difference between width and flex-basis.

Shorthand's shorthands

The final gotcha with the flex shorthand is that it accepts some magical keywords that set all three properties for you in a single word. For example:

.item {
  flex: auto;
}

is the same as:

.item {
  flex: 1 1 auto;
}

So if you're going to use this shorthand you need to memorize what the initial, none, auto, and <integer> values map to, as well as what those properties actually do. It's super convenient to be able to do so much with one line of CSS, but only use this once you've really mastered flexbox.

See more Flexbox Pitfalls and How to Avoid Them

Challenge

Once you've gotten the hang of flex-grow, flex-shrink, and flex-basis take your flexbox chops to the next level by trying out the flex shorthand. Commit its keyword shorthands to memory so you don't have to look them up when you come across them in your project. Flexbox Zombies chapter 11 will help.