CSS3 box-flex property
Examples
Define two flexible p elements. If the total width of the parent box is 300px, # P1 will have a width of 100px, # 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;
}
{
-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;
}
Browser Support
The current mainstream browser does not support box-flex property.
Internet Explorer 10 private property by the -ms-flex support.
Firefox by private property -moz-box-flex support.
Safari and Chrome by private property -webkit-box-flex support.
Note: Internet Explorer 9 and earlier versions of IE do not support flexible box.
Attribute definitions and instructions
box-flex attribute specifies box child element is flexible or fixed size.
Tip: With thebox shrink and grow, whether the element is a flexible shrink or grow. Whenever there is extra space in the box, the flexible elements expand to fill the space.
| Defaults: | 0.0 (indicating that the element is not flexible) |
|---|---|
| inherit: | no |
| version: | CSS3 |
| JavaScript syntax: | object .style.boxFlex = 2.0 |
grammar
box-flex:value;
| value | description |
|---|---|
| value | Flexibility elements. All Flex is relative |
