CSS flex Property
flex: 1 0 30%;
The flex is shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
The flex shorthand can better accommodate the most common cases.
It specifies the components of a flexible length: the flex factors (grow and shrink) and the flex basis.
When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.
If a box is not a flex item, flex has no effect.
The default values of the flex components are equivalent to flex: 0 1 auto;.
Note: The default values of flex-grow and flex-basis are different from their defaults when omitted in the flex shorthand.
A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero flex-basis component with a unit or precede it by two flex factors.
|0 1 auto
flex: flex-grow flex-shrink flex-basis|none|auto|initial|inherit|revert|revert-layer|unset;
The numbers in the table specify the first browser version that fully supports the property.
The following table describes the values of this property.
|Specifies the flex grow factor or positive flexibility for the flex item.
|Specifies the flex shrink factor or negative flexibility for the flex item.
|Specifies the initial size of the flex item.
|Sets to flex to 0 0 auto.
|Sets to flex to 1 1 auto.
|Sets this property to its default value.
|If specified, the associated element takes the computed value of its parent element animation-delay property.
|Reverts the cascaded value of the property from its current value to the value the property
|Rollback styles to the ones specified in previous cascade layers.
|Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
Default CSS Property Values
flex: 0 1 auto;
flex: 1 0 30%;