Style flex attribute

Definition and Usage

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

flex This attribute is a shorthand attribute for the flexGrow, flexShrink, and flexBasis attributes.

Note：If the element is not a flexible item, then flex Attribute is invalid.

See also：

CSS Reference Manual：flex Attribute

HTML DOM STYLE Reference Manual：flexBasis Attribute

HTML DOM STYLE Reference Manual：flexDirection Attribute

HTML DOM STYLE Reference Manual：flexFlow Attribute

HTML DOM STYLE Reference Manual：flexGrow Attribute

HTML DOM STYLE Reference Manual：flexShrink Attribute

HTML DOM STYLE Reference Manual：flexWrap Attribute

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 attribute：

object.style.flex

Set flex attribute：

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

Attribute Value

Value Description
flex-grow Number, specifying the growth amount of the item relative to other flexible items.
flex-shrink Number, specifying the shrinkage amount 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 unit.
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： String, representing the element's flex Attribute。
CSS Version： CSS3

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 11.0 Support 9.0 Support