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 toflex: 1 1 auto
.flex: none
is equivalent toflex: 0 0 auto
.flex: initial
sets theflex
property to its default value. It is equivalent toflex: 0 1 auto
.flex: inherit
inherits its parent element'sflex
property's values.