CSS `flex` Property

Example

Make all child elements of the flexbox model have the same length, ignoring their internal content:

#main div {
    flex: 1;
}

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

Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.

Property	Chrome	IE	Firefox	Safari	Opera
flex	29.0 <br>21.0 -webkit-	11.0 <br>10.0 -ms-	28.0 <br>18.0 -moz-	9.0 <br>6.1 -webkit-	17.0

The flex property is used to set or retrieve how flex items are sized and aligned within a flex container.

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Note: The flex property has no effect if the element is not a flex item.

Default value:	0 1 auto
Inherited:	No
Animatable:	Yes, see individual properties. Refer to Animatable
Version:	CSS3
JavaScript syntax:	`object.style.flex="1"` Try it

Value	Description
flex-grow	A number specifying how much the item will grow relative to the rest of the flexible items.
flex-shrink	A number specifying how much the item will shrink relative to the rest of the flexible items.
flex-basis	The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em", or any other length unit.
auto	Same as 1 1 auto.
none	Same as 0 0 auto.
initial	Sets this property to its default value, which is 0 1 auto. See initial
inherit	Inherits this property from its parent element. See inherit

CSS Reference Manual: flex-basis Property

CSS Reference Manual: flex-flow Property

CSS Reference Manual: flex-grow Property

CSS Reference Manual: flex-shrink Property

CSS Reference Manual: flex-wrap Property