Style flexProperty
Style ObjectExample
Make all flexible items have the same length, ignoring their contents:
y[i].style.flex="1";
}
Try it Yourself »
Definition and Usage
The flex property sets or returns the length of the item, relative to other flexible items within the same container.
The flex property is a shorthand property for the flexGrow, flexShrink, and flexBasis properties.
Note:If the element is not a flexible item, the flex property has no effect.
Browser Support
All major browsers support the flex property, except Safari.
IE 9 and earlier versions do not support the flex property. IE 10 requires the MS prefix to support this property.
Syntax
Return the flex property:
Set the flex property:
Property Values
| Value | Description |
|---|---|
| flex-grow | A number specifying the amount the item will grow relative to other flexible items. |
| flex-shrink | A number specifying the amount the item will shrink relative to other 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. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default Value: | 0 1 auto |
|---|---|
| Return Value: | A string, representing the flex property of an element. |
| CSS Version | CSS3 |
Related Articles
CSS Reference:flex property
HTML DOM STYLE Reference:flexBasis property
HTML DOM STYLE Reference:flexDirection property
HTML DOM STYLE Reference:flexFlow property
HTML DOM STYLE Reference:flexGrow property
HTML DOM STYLE Reference:flexShrink property
HTML DOM STYLE Reference:flexWrap property
Other Extensions