From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/box-pack/index.html | 144 +++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/ja/web/css/box-pack/index.html (limited to 'files/ja/web/css/box-pack') diff --git a/files/ja/web/css/box-pack/index.html b/files/ja/web/css/box-pack/index.html new file mode 100644 index 0000000000..0a448172a9 --- /dev/null +++ b/files/ja/web/css/box-pack/index.html @@ -0,0 +1,144 @@ +--- +title: box-pack +slug: Web/CSS/box-pack +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - box-pack +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

+
+ +

CSS の -moz-box-pack および -webkit-box-pack プロパティは、 -moz-box または -webkit-box がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に余白がある場合のみ見ることができます。

+ +
/* キーワード値 */
+box-pack: start;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* グローバル値 */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+
+ +

レイアウトの方向は要素の方向、 horizontal または vertical に依存します。

+ +
{{CSSInfo}}
+ +

構文

+ +

box-pack プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
start
+
ボックスは内容を先頭にまとめ、残りの余白を末尾に残します。
+
center
+
ボックスは内容を中央にまとめ、残りの余白を先頭と末尾に均等に分配します。
+
end
+
ボックスは内容を末尾にまとめ、残りの余白を先頭に残します。
+
justify
+
余白はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には余白が配置されません。子が一つだけであれば、値が start であるのと同様に扱われます。
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* このボックスを子よりも高くし、
+     box-pack のための余裕を作る */
+  height: 300px;
+  /* このボックスを、水平方向に中央揃えされた
+     内容を表示するのに十分な幅にする */
+  width: 300px;
+
+  /* 子を垂直方向に並べる */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* 子をこのボックスの水平方向に中央揃えする */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* 子をこのボックスの下にまとめる */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* 子を親より狭くして、
+     box-align のための余裕を作る */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>I will be second from the bottom of div.example, centered horizontally.</p>
+  <p>I will be on the bottom of div.example, centered horizontally.</p>
+</div>
+
+ +
{{EmbedLiveSample('Examples', 310, 310)}}
+ +

メモ

+ +

まとめる目的で start で示されるボックスの端は、ボックスの向きと方向に依存します。

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontal左右
Vertical上下
+ +

start と反対の端は end で表されます。

+ +

まとめ方が要素の pack 属性を使用して設定されていた場合は、スタイルは無視されます。

+ +

仕様書

+ +

このプロパティは標準外ですが、 CSS3 Flexbox の早期の草稿に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。

+ +

ブラウザーの対応

+ + + +
{{Compat("css.properties.box-pack")}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf