CSS3 box-flexProperty
Example
Define two flexible p elements. If the total width of the parent box is 300px, #P1 will have a width of 100px, and P2 will have a width of 200px:
#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;
}
Try it Yourself »
Browser Support
Currently no browser supports the box-flex property.
Firefox supports the alternative -moz-box-flex property.
Safari, Opera, and Chrome support the alternative -webkit-box-flex property.
Attribute definition and usage instructions
The box-flex property is non-standard and not recommended for use.
The box-flex property specifies whether the children of a box are flexible or fixed in size.
Tip:As the box shrinks and grows, the elements flexibly shrink or grow. Whenever there is extra space in the box, the elements flexibly expand to fill that space.
| Default Value: | 0.0 (indicating that the element is inflexible) |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.boxFlex=2.0 |
Syntax
box-flex: value;
| Value | Description |
|---|---|
| value | The flexibility of the element. All flex values are relative. |