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 */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The box-flex property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-box-flex property.

Safari and Chrome support an alternative, the -webkit-box-flex property.


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