CSSのbox-pack属性の使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのbox-pack属性の使い方

silencement

May 27, 2019 pm 05:10 PM

CSSのbox-pack属性の使い方

css box-pack 属性の定義と使用法

1. box-pack 属性は css3 の新しい属性であり、次の目的で使用されます。ボックスが子要素のサイズより大きい場合、子要素をどこに配置するかを指定しますか? 現在、主流のブラウザーはこの属性をサポートしていませんが、一部のブラウザーは box-pack 属性の効果を実現する独自のプライベート属性を持っています。

2. Internet Explorer 10 では、box-pack 属性をサポートする代わりに、-ms-flex-pack プロパティ属性を使用できます。Internet Explorer 10 より前のバージョンでは、この属性はサポートされていません。 Firefox コアブラウザは、代わりにプライベート属性 -moz-box-pack 属性を通じて box-pack 属性をサポートできます。 Safari、Opera、および Chrome ブラウザは、プライベート属性 -webkit-box-pack 属性を介して代わりに box-pack 属性をサポートできます;

css box-pack 属性構文形式

box-pack: start/end/center/justify;

ログイン後にコピー

属性値の説明

start: 通常の向きのボックスの場合、左端の最初の子要素が左側に配置されます (余分なスペースはすべて、最後の子要素の後に配置されます)。。反転したボックスの場合、最後の子の右端は右に配置されます (余分なスペースはすべて最初の子の前に配置されます)

end: 通常の向きのボックスの場合、最後の子の右端が右に配置されます。は右側に配置されます (余分なスペースはすべて最初の子要素の前に配置されます)。逆ボックスの場合、最初の子の左端が左側に配置されます (余分なスペースはすべて最後の子要素の後に配置されます)

center: 余分なスペースは 2 つの偶数半分に分割されます。半分は 1 つの子要素を配置し、残りの半分は最後の子要素を配置します。

justify: 余分なスペースは各子要素に均等に配分されます

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-pack属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 100px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:center;/* W3C */
-ms-flex-pack:center;/* Internet Explorer 10 */
-moz-box-pack:center;/* Firefox */
-webkit-box-pack:center;/* Safari, Opera, and Chrome */
}
.box2{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:justify;/* W3C */
-ms-flex-pack:justify;/* Internet Explorer 10 */
-moz-box-pack:justify;/* Firefox */
-webkit-box-pack:justify;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1"><p>1</p><p>2</p></div>
<div class="box2"><p>1</p><p>2</p></div>
</body>
</html>

ログイン後にコピー

操作結果