flex in CSS – What Is Flexbox's flex Property?

flex is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

In other words, instead of writing:

.flex-item3 {
  flex-grow: 0.5;
  flex-shrink: 0;
  flex-basis: 100px;
}

You can alternatively use the flex property to shorten your code like so:

.flex-item3 {
  flex: 0.5 0 100px;
}

Note the following:

flex: auto is equivalent to flex: 1 1 auto.
flex: none is equivalent to flex: 0 0 auto.
flex: initial sets the flex property to its default value. It is equivalent to flex: 0 1 auto.
flex: inherit inherits its parent element's flex property's values.