フレックスボックス、グリッド、マルチカラム、ボックス等をレイアウトするために使用される、下記のCSSプロパティについて説明します。
結論だけ先に書くと、現時点では下記を指定するのがよさそうです。
これらのプロパティは最初フレックスボックスの仕様の一部として定義されました。ここでは、プロパティとして justify-content, align-self, align-items, align-content のみが定義されています。値も auto, flex-start, flex-end, right, left, center, baseline, space-between, space-around, stretch のみが定義されています。
後に、フレックスボックスに加え、グリッド、マルチカラム、ボックスなどに対する汎用的な仕様として再定義されました。プロパティとして justify-self, justify-items, place-self, place-items, place-content が追加されました。値として normal, start, end, self-start, self-end, space-evenly, legacy, legacy left, legacy right, legacy center が追加されました。また、補足値として safe, unsafe が追加されました。
親要素を コンテナ、子要素を アイテム と呼びます。
文字が並ぶ方向を 主軸、改行が進む方向を 交差軸 と呼びます。通常は左から右が主軸、上から下が交差軸です。アラビア語など文字を右から左に書く環境では主軸は右から左となります。日本語の縦書きでは主軸は上から下、交差軸は右から左となります。
レイアウトの対象には下記のものがありますが、フレックスとグリッド以外は、まだブラウザの対応が追い付いていないため、ここではフレックスとグリッドについてのみ説明します。
justify-* は主軸方向のレイアウトを制御します。align-* は交差軸方向のレイアウトを制御します。place-* は主軸と交差軸をまとめて指定します。
*-self はアイテムに直接指定します。*-items や *-content はコンテナに指定してその子アイテムのレイアウトを制御します。
.container {
justify-items: ...;
justify-content: ...;
align-items: ...;
align-content: ...;
}
.item {
justify-self: ...;
align-self: ...;
}
flex-wrap: wrap などでアイテムが改行されている場合や、グリッドで行・列の概念がある場合、*-items はひとつの行や列の中での、個々の子アイテムの位置を制御するのに対して、*-content は、行や列自体をどのように配置するかを制御します。
| 値 | [CSS-FLEXBOX-1] | [CSS-ALIGN-3] | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| justify-content | align-self | align-items | align-content | justify-self | justify-items | justify-content | align-self | align-items | align-content | ||
| normal | － | － | － | － | ○ | ○ | ○ | ○ | ○ | ○ | |
| auto | － | ○ | － | － | ○ | － | － | ○ | － | － | |
| 方向 | center | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| start | － | － | － | － | ○ | ○ | ○ | ○ | ○ | ○ | |
| end | － | － | － | － | ○ | ○ | ○ | ○ | ○ | ○ | |
| flex-start | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | |
| flex-end | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | |
| self-start | － | － | － | － | ○ | ○ | － | ○ | ○ | － | |
| self-end | － | － | － | － | ○ | ○ | － | ○ | ○ | － | |
| left | － | － | － | － | － | ○ | ○ | － | － | － | |
| right | － | － | － | － | － | ○ | ○ | － | － | － | |
| ベースライン | baseline | － | ○ | ○ | － | ○ | ○ | － | ○ | ○ | ○ |
| first baseline | － | － | － | － | ○ | ○ | － | ○ | ○ | ○ | |
| last baseline | － | － | － | － | ○ | ○ | － | ○ | ○ | ○ | |
| 間隔 | space-between | ○ | － | － | ○ | － | － | ○ | － | － | ○ |
| space-around | ○ | － | － | ○ | － | － | ○ | － | － | ○ | |
| space-evenly | － | － | － | － | － | － | ○ | － | － | ○ | |
| stretch | － | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | |
| レガシー | legacy | － | － | － | － | － | ○ | － | － | － | － |
| legacy left | － | － | － | － | － | ○ | － | － | － | － | |
| legacy right | － | － | － | － | － | ○ | － | － | － | － | |
| legacy center | － | － | － | － | － | ○ | － | － | － | － | |
start, end, flex-start, flex-end, self-start, self-end, center, right, left には、safe または unsafe をつけることができます。
.safe-contaier {
margin-left: 3rem;
display: flex;
flex-direction: column;
width: 5rem;
height: 6rem;
padding: .1rem;
align-tems: center;
border: 1px solid #ccc;
background-color: #eee;
align-items: safe center;
}
.safe-item {
border: 1px solid #ccc;
background-color: #fff;
text-align: center;
padding: .2rem;
}
<div class="safe-contaier"> <span class="safe-item" xstyle="width:5rem">ABC</span> <span class="safe-item" xstyle="width:12rem">ABCDEFGHIJKLMN</span> <span class="safe-item" xstyle="width:5rem">XYZ</span> </div>
フレックスボックス・グリッドに対して、それぞれの指定がどのように動作するかを試してみてください。Chrome よりも Firefox が比較的サポート範囲が広いです。IE の場合はフレックスボックスのみ試せます。