ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSのbox-flex属性の使い方
CSSのbox-flex属性の使い方
- 藏色散人オリジナル
- 2019-05-29 14:20:242405ブラウズ
css box-flex 属性は、ボックスの子要素がそのサイズを拡大または縮小できるかどうかを指定するために使用されます。その構文は box-flex: value です。ボックスが縮小または拡大すると、スケーラブルな要素を短縮または拡大できます。 。
css box-flex 属性を使用するにはどうすればよいですか?
関数: ボックスの子要素のサイズを拡大または縮小できるかどうかを指定します。
構文:
box-flex: 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>効果の出力:
以上がCSSのbox-flex属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。