CSS flex Property

❮ Previous Reference Next ❯

Example

.item3 {
  flex: 1 0 30%;
}





1
2
3
4
5

Meaning

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.

Default value:0 1 auto
Inherited:No
Animatable:Yes
Version:CSS3
JavaScript syntax:
object.style.flex="flex-grow flex-shrink flex-basis|none|auto|initial|inherit|revert|revert-layer|unset";



Standard Syntax

flex: flex-grow flex-shrink flex-basis|none|auto|initial|inherit|revert|revert-layer|unset;



Browser Support

The numbers in the table specify the first browser version that fully supports the property.




Status







Property Values

The following table describes the values of this property.

Value Description
flex-grow Specifies the flex grow factor or positive flexibility for the flex item.
flex-shrink Specifies the flex shrink factor or negative flexibility for the flex item.
flex-basis Specifies the initial size of the flex item.
none Sets to flex to 0 0 auto.
auto Sets to flex to 1 1 auto.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset 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

selectors {
  flex: 0 1 auto;
}



More Example

Example

.item3 {
  flex: 1 0 30%;
}
❮ Previous Reference Next ❯