Style flex Property

Definition and Usage

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

flex This property is a shorthand 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 of the item relative to other flexible items.
flex-shrink A number that specifies the shrinkage of the item relative to other flexible items.
flex-basis

The length of the item.

Valid Values: "auto", "inherit", or values with units of "%", "px", "em", or any other length units.
auto Equivalent to 1 1 auto.
initial Equivalent to 0 1 auto. See also initial.
none Equivalent to 0 0 auto.
inherit Inherits this property from its parent element. See also 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
Support 11.0 Support 9.0 Support