box

英[bɒks] 美[bɑ:ks]

n.ボックス; 箱のような物体; ボックス; 哨兵室

vt. Put... into a box [box, box]

vt.& vi.Boxing

三人称単数: ボックス 複数形: ボックス 現在分詞: ボクシング 過去形: ボックス過去分詞: boxed

flex

英[fleks] 美[flɛks]

v.曲げる(関節); 収縮する(筋肉); 強さを示す

n. Bend; [電気] 花線

三人称単数: flexes 現在分詞: flexing 過去形: flexed 過去分詞: flexed

css box-flex プロパティ 構文

関数: ボックスの子要素のサイズを拡大または縮小できるかどうかを指定します。

構文: box-flex: value;

説明: value スケーラブルな要素の行。柔軟性は相対的なもので、たとえば、box-flex が 2 の子要素は、box-flex が 1 の子要素の 2 倍の柔軟性があります。

注: スケーラブルな要素は、ボックスの縮小または拡大に応じて省略または拡大できます。ボックス内に余分なスペースがある場合は常に、スケーラブル要素が拡張してそのスペースを埋めます。現在、box-flex 属性をサポートしているブラウザはありません。 Firefox は、代替の -moz-box-flex プロパティをサポートしています。 Safari、Opera、および Chrome は、代替の -webkit-box-flex 属性をサポートしています。

css box-flex プロパティ 例

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

インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します