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
isflex-grow
1
isflex-shrink
50%
isflex-basis