Example
Make all child elements of the flexbox object have the same length, ignoring their contents:
- #main div
- {
- flex:1;
- }
复制
Browser support
The numbers in the table represent the version number of the first browser to support the property.
The number immediately following -webkit-, -ms- or -moz- is the first version that supports the prefixed property.
Definition and Usage
The flex property is used to set or retrieve how the child elements of a flexbox model object allocate space.
The flex property is shorthand for the flex-grow, flex-shrink, and flex-basis properties.
Note: The flex property has no effect if the element is not a child of the flexbox model object.
Default: Inherit: Animatable: Version: JavaScript Syntax:| 0 1 auto |
| no |
| Yes, see individual properties . See CSS3 Animation Properties , CSS3 Animation Examples |
| CSS3 |
| object .style.flex="1" effect preview |
CSS syntax
flex:
flex-grow
flex-shrink
flex-basis|auto|initial|inherit;
attribute value
Value description| flex-grow | A number that specifies the amount by which the project will scale relative to other flexible projects. |
| flex-shrink | A number that specifies the amount by which 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 | 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。 |
| inherit | 从父元素继承该属性。请参阅 inherit。 |