CSS flex property
CSS reference manual
Make all the child elements of the elastic box model objects the same length, ignoring the contents inside them:
{
flex:1;
}
Try it out . . .
Browser support
The numbers in the table support the version number of the first browser for this property.
The number immediately after -webkit-, -ms - or -moz - is the first version that supports the prefix property.
| Property | |||||
|---|---|---|---|---|---|
| Flex |
29.0
21.0 -webkit- |
11.0
10.0 -ms- |
28.0
18.0 -moz- |
9.0
6.1 -webkit- |
17.0 |
Definitions and usages
The flex property is used to set or retrieve how children of elastic box model objects allocate space.
The flex property is a short-case property of the flex-grow, flex-shrink, and flex-basis properties.
Note: The flex property does not work if the element is not a child of an elastic box model object.
| Default: | 0 1 auto |
|---|---|
| Inherited: | Whether |
| Animated: | Yes, see individual properties. S ee Animation . |
| Version: | CSS3 |
| JavaScript syntax: | object .style.flex="1" Give it a try |
CSS syntax
The property value
| value | describe |
|---|---|
| flex-grow | A number, the specified item will expand relative to other flexible projects. |
| flex-shrink | A number, the specified item will shrink with other flexible projects. |
| flex-basis | The length of the project.Legal values: "Auto", "inherit" or one post with "%", "px", "em", or numbers of any other length unit. |
| auto | The same as 1 1 auto. |
| none | The same as 0 0 auto. |
| initial | Set this property for its default value, ie 0 1 auto.See initial 。 |
| inherit | Inheriting this property from the parent element.See inherit 。 |
Related articles
CSS Reference Manual: flex-basis properties
CSS Reference Manual: flex-direction properties
CSS Reference Manual: flex-flow properties
CSS Reference Manual: flex-grow property
CSS Reference Manual: flex-shrink properties
CSS Reference Manual: flex-wrap properties