box
英[bɒks] 美[bɑ:ks]
n.Box; box-like object; box; sentry room
vt. Put... into a box [box, box]
vt.& vi.Boxing
Third person singular: boxes Plural: boxes Present participle: boxing Past tense: boxed Past participle: boxed
flex
英[fleks] 美[flɛks]
v.Bend (joint); contract (muscle); show strength
n. Bend; [electricity] flower wire
Third person singular: flexes Present participle: flexing Past tense: flexed Past participle: flexed
css box-flex property syntax
Function: Specifies whether the child elements of the box can expand or contract their size.
Syntax: box-flex: value;
Description: value The scalable row of elements. Flexibility is relative, for example, a child element with a box-flex of 2 is twice as flexible as a child element with a box-flex of 1.
Note: Scalable elements can be abbreviated or enlarged as the box shrinks or expands. Whenever there is extra space in the box, the scalable element expands to fill that space. No browser currently supports the box-flex attribute. Firefox supports an alternative -moz-box-flex property. Safari, Opera, and Chrome support the alternative -webkit-box-flex attribute.
css box-flex property example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}
#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;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">php中文网</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance