CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 box-flex Property
Example
Define two flexible p elements. If the parent box has a total width of 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;
}
{
-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
The box-flex property is only supported by Opera.
Internet Explorer 10 supports an alternative, the -ms-flex property.
Firefox supports an alternative, the -moz-box-flex property.
Safari and Chrome support an alternative, the -webkit-box-flex property.
Note: Flexible boxes are not supported in Internet Explorer 9 and earlier versions.
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;
| 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 |
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
