Style flex property

Definition and Usage

flex Sets or returns the length of the item relative to the other flexible items within the same container.

flex This property is a shorthand property for the flexGrow, flexShrink, and flexBasis properties.

Note:If the element is not a flexible item, then flex Property is invalid.

See also:

CSS Reference Manual:flex property

HTML DOM STYLE Reference Manual:flexBasis property

HTML DOM STYLE Reference Manual:flexDirection property

HTML DOM STYLE Reference Manual:flexFlow property

HTML DOM STYLE Reference Manual:flexGrow property

HTML DOM STYLE Reference Manual:flexShrink property

HTML DOM STYLE Reference Manual:flexWrap property

Example

Make all flexible items have the same length regardless of their content:

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

Try it yourself

Syntax

Return flex property:

object.style.flex

Set flex property:

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

Property value

Value Description
flex-grow A number that specifies the growth amount of the item relative to other flexible items.
flex-shrink A number that specifies the shrinkage amount of the item relative to other flexible items.
flex-basis

Length of the item.

Valid values: "auto", "inherit", or values with units of "%", "px", "em", or any other length unit.
auto Equivalent to 1 1 auto.
initial Equivalent to 0 1 auto. See initial.
none Equivalent to 0 0 auto.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: 0 1 auto
Return value: A string that represents the element's flex property.
CSS version: CSS3

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto 11.0 Supporto 9.0 Supporto