CSS Flexbox

Flex shorthand

The various flex properties are usually specified using the flex shorthand property that combines flex-grow, flex-shrink and flex-basis.

We recommend using the shorthand property when working with flexbox as it makes it hard to make silly mistakes.

One value syntax

Copy
/* unitless */
selector {
  flex: 1;
}

/* equivalent */
selector {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

When we set the property to a unitless value, it is assumed that we meant to set the flex-grow property. flex-shrink is then set to 1 and flex-basis is set to 0.

Copy
/* length unit */
selector {
  flex: 100px;
}

/* equivalent */
selector {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

When we set the property to a length unit value, it is assumed that we meant to set the flex-basis property. flex-grow is then set to 1 and flex-shrink is set to 1.

Two value syntax

Copy
/* both unitless */
selector {
  flex: 1 2;
}

/* equivalent */
selector {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 0;
}

When we set the property to two unitless values, it is assumed that we meant to set the flex-grow and flex-shrink properties. flex-basis is then set to 0.

Copy
/* first unitless, second length unit */
selector {
  flex: 1 20px;
}

/* equivalent */
selector {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20px;
}

When we set the property to one unitless value and one length unit value, it is assumed that we meant to set the flex-grow and flex-basis properties. flex-shrink is then set to 1.

Three value syntax

Copy
selector {
  flex: 1 2 300px;
}

/* equivalent */
selector {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 300px;
}

When we set the property to three values, it is assumed that we meant to set the flex-grow, flex-shrink and flex-basis properties in that order.