CSS ボックス配置モジュールは、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このガイドでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このガイドはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明しているボックス配置ガイドを併せて読んでください。

align-content と justify-content

justify-content プロパティは、ブロックコンテナーや表のセルには適用されません。

align-content プロパティは、ブロック軸に適用され、ボックスのコンテンツをそのコンテナー内で整列させるためのものです。space-between、space-around、space-evenly などのコンテンツの配分方法が要求されている場合は、コンテンツが 1 つの配置対象物として扱われるため、代替配置が使用されます。

justify-self

justify-self プロパティは、インライン軸上で包含ブロックの内部にアイテムを配置するために使用されます。

このプロパティは浮動要素や表のセルには適用されません。

align-self

align-self プロパティは、ブロックレベルボックスには (浮動要素を含め) 適用されません。ブロック軸に複数のアイテムがあるからです。表のセルにも適用されません。

絶対配置要素

配置コンテナーは、上、左、下、右のオフセット値を考慮して位置指定されたブロックです。normal キーワードはstretch に解決されますが、その位置指定アイテムが置換要素である場合はstart に解決されます。

現在のレイアウト方法での整列

現在、ブラウザーはブロックレイアウトでのボックス配置に対応していないため、整列には既存の配置方法のいずれかを使用するか、コンテナー内の 1 つのアイテムでもフレックスボックスで指定された配置プロパティを使用するためにフレックスアイテムにするかのいずれかを選択できます。

フレックスボックスが導入される前のブロックの水平方向の整列は、ブロックに auto のマージンを設定する方法が一般的でした。margin をauto に設定すると、その次元で利用可能なすべての空間を吸収するため、左右のマージンを自動に設定すると、ブロックを中央に配置することができます。

.container {  width: 20em;  margin-left: auto;  margin-right: auto;}

表レイアウトでは、vertical-align プロパティを使用して、セルの内容をそのセル内で配置させることができます。

多くの利用場面では、ブロックコンテナーをフレックスアイテムに変えることで、求めていた配置機能が得られます。以下の例では、アイテムが 1 つだけ入っているコンテナーを、配置プロパティを使用できるようにするためにフレックスコンテナーに変えています。

<div>  <div></div></div>

.box {  height: 300px;  border: 2px dotted rgb(96 139 168);}.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  display: flex;  align-items: center;  justify-content: center;}.box div {  width: 100px;  height: 100px;}

関連情報

• CSS ボックス配置モジュール
• ボックス配置の概要
• フレックスボックスのボックス配置
• グリッドレイアウトでのボックス配置
• 段組みレイアウトのボックス配置