flex
Property
Example
Make all flexible items the same length, regardless of their content:
Definition and Usage
The flex
property sets or returns the length of the item, relative to the rest of the flexible items inside the same container.
The flex
property is a shorthand property for the flexGrow
, flexShrink
, and flexBasis
properties.
Note: The flex
property has no effect if the element is not a flexible item.
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 prefix MS
to support this property.
Syntax
Return the flex
property:
Set the flex
property:
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. |
none | Same as 0 0 auto. |
initial | Sets this property to its default value, which is 0 1 auto. See initial |
inherit | Inherits this property from its parent element. See inherit |
Technical Details
Default value: | 0 1 auto |
---|---|
Return value: | String, representing the flex property of the 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