May 05, 2021 CSS Reference Manual
Define two scalable p-elements. If the total width of the parent element is 300 pixels, the width of #p1 is 100 pixels, and the width of #p2 is 200 pixels:
#p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari 和 Chrome */ box-flex:1.0; border:1px solid red; } #p2 { -moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari 和 Chrome */ box-flex:2.0; border:1px solid blue; }
There is currently no browser that supports the box-flex property.
Firefox supports alternative -moz-box-flex properties.
Safari, Opera, and Chrome support alternative -webkit-box-flex properties.
The box-flex property specifies whether the child elements of the box can be retracted to their size.
Tip: Scalable elements can be abbreviated or enlarged as the box shrinks or expands. As long as there is extra space in the box, the scalable elements expand to fill the space.
Default: | 0.0 (indicating that the element is non-scalable) |
---|---|
Inheritance: | no |
Version: | CSS3 |
JavaScript syntax: | object .style.boxFlex=2.0 |
box-flex: value;
Value | Describe |
---|---|
value | The scalable row of the element. Flexibility is relative, for example, a child element with box-flex of 2 is twice as large as a child element with box-flex of 1. |