Definition and Usage
The box-flex property specifies whether the child elements of a box is flexible or inflexible in size.
Tip: Elements that are flexible can shrink or grow as the box shrinks and grows. Whenever there is extra space in a box, flexible elements are expanded to fill that space.
| Default value: | 0.0 (indicates that the element is inflexible) |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.boxFlex=2.0 |
Syntax
box-flex: value;
Values
| Value | Description |
|---|---|
| value | The flexibility of the element. All flex is relative, e.g. a child with a box-flex of 2 is twice as flexible as a child with a box-flex of 1 |
Examples
#p1 {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2 {
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
