Style flex Property

Style flex Property

It sets how a flex item will grow or shrink to fit the space available in its flex container. It is used to set the length of flexible items.

Browser Support

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

property	chrome	firefox	microsoft edge	Opera
flex	yes	yes	11.0	yes

 

Syntax

Return the flex property:

object.style.flex

Set the flex property:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

Example

Output

 

Click the "Try it" button to set the flex property of ALL DIV elements inside the "div1" element:

 

Property Values

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.
initial	Same as 0 1 auto.
inherit	Inherits this property from its parent element.

 

Technical Details

Version:	CSS3
Return value	A String, representing the flex property of an element
Default value	0 1 auto