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;
}

The CSS flex property accepts the following types of values:

• One value: For example, flex: <value>.
• Two values: For example, flex: <value1> <value2>.
• Three values: For example, flex: <value1> <value2> <value3>.

What Does flex’s One-Value Syntax Mean?

flex’s one-value syntax is a shorthand for specifying the values for the flex-grow, flex-shrink, and flex-basis properties.

flex accepts the following types of one-value arguments:

What is flex: auto in CSS flexbox?

flex: auto is equivalent to flex: 1 1 auto.

What is flex: none in CSS flexbox?

flex: none is equivalent to flex: 0 0 auto.

What is flex: initial in CSS flexbox?

flex: initial sets the flex property to its default value. It is equivalent to flex: 0 1 auto.

What is flex: inherit in CSS flexbox?

flex: inherit inherits its parent element’s flex property’s values.

What is flex: <flex-grow-value> in CSS flexbox?

flex: <flex-grow-value> is equivalent to flex: <flex-grow-value> 1 0.

For instance, flex: 1 is the same as flex: 1 1 0.

What is flex: <flex-basis-value> in CSS flexbox?

flex: <flex-basis-value> is equivalent to flex: 1 1 <flex-basis-value>.

For instance, flex: 70px is the same as flex: 1 1 70px.

What Does flex’s Two-Value Syntax Mean?

flex’s two-value syntax is a shorthand for specifying the values for the flex-grow, flex-shrink, and flex-basis properties.

flex accepts the following types of two-value arguments:

What is flex: <flex-grow-value> <flex-shrink-value> in CSS flexbox?

flex: <flex-grow-value> <flex-shrink-value> is equivalent to flex: <flex-grow-value> <flex-shrink-value> 0.

For instance, flex: 3 0.7 is the same as flex: 3 0.7 0.

What is flex: <flex-grow-value> <flex-basis-value> in CSS flexbox?

flex: <flex-grow-value> <flex-basis-value> is equivalent to flex: <flex-grow-value> 1 <flex-basis-value>.

For instance, flex: 3 50% is the same as flex: 3 1 50%.

What does flex’s three-value syntax mean?

flex’s three-value syntax is a shorthand for specifying the values for the flex-grow, flex-shrink, and flex-basis properties. Here’s the syntax:

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

For instance, in flex: 3 1 50%,

• 3 is flex-grow
• 1 is flex-shrink
• 50% is flex-basis