css box-flex property


  Translation results：

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 propertysyntax

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 propertyexample

<!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

Popular Recommendations

Home

Videos

Q&A

submit