CSS3 `box-flex` Property

Example

Defines 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;
}

Browser Support

Currently, no browsers support the box-flex property.

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

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

Property Definition and Usage

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, whether the elements are flexible to shrink or grow. Whenever there is extra space within the box, the elements flexibly expand to fill that space.

Default value:	0.0 (indicates the element is not flexible)
Inherited:	no
---	---
Version:	CSS3
---	---
JavaScript syntax:	object.style.boxFlex=2.0
---	---

Syntax

Value	Description
value	The flexibility of the element. All flex values are relative.

❮ Css Units Css3 Pr Word Break ❯

CSS3 box-flex Property

Example

Browser Support

Property Definition and Usage

Syntax

CSS3 `box-flex` Property