CSS Reference Guide: flex

The CSS flex property is a shorthand used to set flex-grow, flex-shrink, and flex-basis properties on flexible items. These properties determine the way flexible items are aligned and ordered, along with their flexibility inside their parent containers.

Jump ahead:

• Syntax
• Rules
• Component properties
  • flex-grow
  • flex-shrink
  • flex-basis

Review an example here:

See the Pen
css flex examples by Chidume David (@philipsz-davido)
on CodePen.

---

Syntax

The general syntax of the flex property is:

flex: <flex-grow> <flex-shrink> <flex-basis>

<flex-grow>

Defines the flex-grow factor of the flex item. Its value is unitless and a <number>. Its initial value is 0.

<flex-shrink>

Defines the flex-shrink factor of the flex item. Its value is unitless and a <number>. Its initial value is 1.

<flex-basis>

Defines the initial length of the flex item. Its value is specified as a <'width'> — an absolute <length>, <percentage>, or calc() result, or the keyword auto. Its initial value is auto.

---

Rules

The flex property can take one, two, or three values. Here are the rules:

One value:

• If the one value is a unitless <number>, like so:

  flex: 3;

  Then flex-grow is assigned the value. flex-shrink takes its default value of 1, and flex-basis is assumed to be 0 when omitted.

  flex: 3;
  
  // explodes to:
  
  flex: 3 1 0
  
  // or
  
  flex-grow: 3
  flex-shrink: 1
  flex-basis: 0

• If the one value is a <percentage> or a <length>, then it becomes the flex-basis. flex-grow and flex-shrink default to 1 when omitted.

  flex: 3%
  
  // explodes to:
  flex: 1 1 3%
  
  // or
  flex-grow: 1 flex-shrink: 1 flex-basis: 3%

  flex: 3px
  
  // explodes to:
  
  flex: 1 1 3px
  
  // or
  flex-grow: 1
  flex-shrink: 1
  flex-basis: 3px

---

Two values:

• If the two values set in the flex property are both a unitless <number>, then flex-grow takes the first value and flex-shrink takes the second. flex-basis is assumed to be 0.

  flex: 4 2
  
  // explodes to:
  
  flex: 4 2 1%

• If one of the numbers is a <percentage> and the other is a <number>, flex-basis takes the <percentage> value and flex-grow takes the other value. flex-shrink defaults to 1.

  flex: 4% 5
  
  // explodes to:
  
  flex: 5 1 4%

  flex: 6 3%
  
  // explodes to:
  
  flex: 6 1 3%

---

Three values:

• In this case, the normal syntax is used. Note that the values in the flex property may not be orderly; we may find a case where a percentage value is set first or second. Below, CSS takes the first number as flex-grow, the second occurring number as flex-shrink, then the percentage value as flex-basis:

  flex: 4% 5 6
  
  // equals:
  
  flex: 5 6 4%

  flex: 5 4% 6
  
  // equals:
  
  flex: 5 6 4%

---

Component properties

flex-grow

This defines the extent to which a flexible item will grow if there is available space in the flex container. The growth is proportional to the growth of its other flexible items in the same flex container.

flex-grow: 0
flex-grow: 0
flex-grow: 0

The flex items above won’t grow to fill up the spaces because they have a growth factor of zero. If we set one of the items to a flex growth of 1:

flex-grow: 0
flex-grow: 0
flex-grow: 1

The third item will only stretch or grow to fill up the spaces to the right.

If we set the second item to a flex growth of 1 as well:

flex-grow: 0
flex-grow: 1
flex-grow: 1

The second and third items will stretch to fill up the spaces towards the right but will be distributed equally between the two. The third item won’t take up as large a space as it did before. The available space will be divided between the items 2 and 3, and then will be filled up.

If we set all items to a flex growth of 1:

flex-grow: 1
flex-grow: 1
flex-grow: 1

The available spaces will be divided among the three, and they will fill it up proportionally.

If we set the third item to the flex-grow value of 2:

flex-grow: 1
flex-grow: 1
flex-grow: 2

The third item take up twice as much space as the first and second items.

This is a simple ratio of 1:1:2. The sum of the ratios is (1 + 1 + 2) = 4.

If the space to fill is 700px, the first item will take up (1/4 * 700), or 175px. Likewise, the second item will take up 175px, and the third item will take up (2/4 * 700) = 350px — twice as long as 175px.

---

flex-shrink

This defines the extent to which a flex item will shrink if there is no available space in the flex container relative to its sibling flex items.

Let’s say we have a flex container of width 700px, and it has three flex items of width 300px. Judging by the figures, we are sure the flex items — specifically, the third flex item — will overflow their parent container.

Using flex-shrink on the third item will make it shrink to fit inside the flex container. In essence, the third item will become narrower or shorter according to the value of flex-shrink.

If we set the following flex-shrink values on the items:

flex-shrink: 0
flex-shrink: 0
flex-shrink: 1

The third item will shrink by a factor of 1. As we saw with flex-grow, these values are ratios that tell us how the excess overflow will be divided among the flex items to shed: 0:0:1.

The excess overflow is 900px - 700px = 200px. So the third item will have to shrink by 200px — from 300px to 100px — for it to fit into the flex container.

If the flex-shrink of the second item is set to 2:

flex-shrink: 0
flex-shrink: 2
flex-shrink: 1

Then the second item will shrink twice as much as the third item. We know that the excess overflow is 200px, so the second item will shed (2/3 * 200) = 133.3px , so its width will be 166.6px. The third item will shed (1/3 * 200) = 66.6px, so its width will be 233.3px.

Summing up all three items: 300 + 166.6 + 233.3 = 699.9 — approximately 700px.

---

flex-basis

This property sets the size of a flex item. It is added to the size of the flex item after growing to fill up available spaces or shrinking to avoid overflows.

The flex item size is computed and added to the size of the space it is to take, then the other items sizes are then computed.

Let’s say we have a flex container with a width of 700px. It contains three flex items, all with flex-grow values of 1, and with the below flex-basis values:

flex-basis: 0
flex-basis: 2%
flex-basis: 3%

The percentage value tells the flex item to grow 2% or 3% of the parent’s width. With a flex-grow of 1, all the flex items will share the available spaces equally: (700 / 3) = 233.3px.

So the second item will grow to 231px, the third item will grow to 236px, and the first item will decrease to 225px.