Skip to main content

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.
Buy your CSS Flexbox Explained Visually book on Amazon
Everything you need to sell courses, webinars, downloads, and community.