The CSS flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

.item {
  flex: 1 1 200px;
}

The three values represent: grow, shrink, and basis.

The value flex: 1 is a very common way to make flex items share available space. It is especially useful for equal-width cards and columns.

.item {
  flex: 1;
}

This three-value form explicitly sets grow to 0, shrink to 1, and basis to auto.

.item {
  flex: 0 1 auto;
}

With grow and shrink both set to 0, the item does not participate in flexible growth or shrinking.

.item {
  flex: 0 0 200px;
}

This is useful when you want an item to start around

.item {
  flex: 1 1 250px;
}

The flex shorthand also supports shorter forms. When two unitless numbers are supplied, they represent grow and shrink.

.item {
  flex: 2 1;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 250px;
}

Can be written as:

.item {
  flex: 1 1 250px;
}