【64-2】ボックス配置の「整列キーワード」まとめ

今回は、ボックス配置 （Box Alignment Module） のプロパティで使う「値」についてまとめます。
「値」は、全部キーワードで、これを「整列キーワード」と呼びます。
この「整列キーワード」を整理してみます。

本日のINDEX

1. 整列キーワード（分布・整列で使う「値」）
   1. 位置的整列キーワード
   2. ベースライン整列キーワード
   3. 分布型整列キーワード
   4. オーバーフロー時の整列キーワード

ボックス配置は、下記のように記事を分けます。

【63】アイテム間の空きを指定する gap（row-gap, column-gap）

【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）

【64-2】ボックス配置の「整列キーワード」まとめ　←今日はココ

【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）

【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）

【64-5】アイテムの配置・分布を指定するショートハンド place-content

【64-6】アイテム個別の配置を指定する justify-self (主軸方向)

【64-7】アイテム個別の配置を指定する align-self (交差軸方向)

【64-8】アイテム個別の配置を一括指定する place-selfショートハンド

【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)

【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)

【64-11】アイテム配置を一括指定する place-itemsショートハンド

参考：
・CSS Box Alignment Module Level 3 | W3C Working Draft
・CSS ボックス配置 | MDN

整列キーワード（分布・整列で使う「値」）

整列キーワードは、以下の3種類に分類されています。
・位置的整列（positional alignment）
・ベースライン整列（baseline alignment）
・分布型整列（distributed alignment）

位置的整列キーワード

位置的整列のキーワードは、以下の9個です。
・center
・start
・end
・self-start
・self-end
・flex-start（Flexboxのみの値）
・flex-end（Flexboxのみの値）
・left
・right

上記はさらに下記のように分類されます。
・書字方向によって軸が変わる値：普通の横書きなら start は左、アラビア語とかだと右になる。
・<self-position>：アイテムの位置指定用。「-self」「-items」で使われる。
・物理値：書字方向に関係なく物理的方向を示す（left と right だけ）
・<content-position>：コンテナ側での指定用。「-content」で使用。

書字方向による値 <self-position>	center | start | end | self-start | self-end | flex-start | flex-end
物理値	left | right
<content-position>	center | start | end | flex-start | flex-end

それぞれのキーワードは、以下の意味があります。

center

「センター揃え」に

start

書字方向の「始点」のある辺に整列。
例えば、英語や日本語の横書きなら「左」に。アラビア語だったら「右」。
日本語の縦書きモードなら「上」に整列します。

end

各行は、書字方向の「終点」のある辺に整列。
例えば、英語や日本語の横書きなら「右」に。アラビア語だったら「左」。
日本語の縦書きモードなら「下」に整列します。

self-start

「-self」「-items」で使える値（「-content」では使えません）。
これも書字方向による整列ですが、整列する始点は、アイテムが占めることができるエリア内での始点です。

self-end

「-self」「-items」で使える値（「-content」では使えません）。
これも書字方向による整列ですが、整列する終点は、アイテムが占めることができるエリア内での終点です。

flex-start

Flexboxだけで使える値です。
flex-directionプロパティによる「始点」にアイテムを整列させます。
デフォルトの flex-direction: row なら書字方向に従って「始点」が決まります。

flex-end

Flexboxだけで使える値です。
flex-directionプロパティによる「終点」にアイテムを整列させます。
デフォルトの flex-direction: row なら書字方向に従って「終点」が決まります。

left

物理的に「左揃え」に（書字方向と関係なく）

right

物理的に「右揃え」に（書字方向と関係なく）

ベースライン整列キーワード

注意：この「ベースライン整列キーワード」はW3C仕様書の冒頭で「at-risk」に入っていて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年1月記）

テキストのベースライン（baseline）を基準にした整列をさせます。

ベースラインとは、テキストを揃えるベースになるライン。
ディセンダー文字（g j y p q）は、ベースラインの下にはみ出して表示されます。
alphabetic baseline（アルファベティック　ベースライン）と、日本語などのマルチバイト文字の ideographic baseline（イデオグラフィック　ベースライン）は位置がちょっと違うけど、まあだいたい一緒ですw。（ちなみに ideographic は「表意文字」のこと。漢字とかの）

キーワードは baseline だけ。
これ単独で使う場合と、改変子（modifiers）の first か last を付ける場合があります。

first baseline の代替配置は start、 last baseline の代替配置は end です。

それぞれのキーワードは、以下の意味があります。

baseline

first baselineと同じになります。

first baseline

アイテム内のテキストの 1行目のベースラインに合わせて整列させます。

last baseline

アイテム内のテキストの 最終行のベースラインに合わせて整列させます。

分布型整列キーワード

分布型整列は、コンテナ内のアイテムの分布方法を決めるためのキーワード。
構文では <content-distribution> という分類で「-content」だけで使用します。
以下の4個のキーワードがあります。
・stretch
・space-between
・space-around
・space-evenly

それぞれのキーワードは、以下の意味があります。

stretch

アイテムのサイズを伸ばして（stretch）、コンテナいっぱいに満たします。
ただしこれは、アイテムのサイズが「auto」で、アイテムのサイズの合計がコンテナ内部より小さかった場合です。
アイテムのサイズを指定していて、アイテムの合計がコンテナより小さい場合は、たとえ stretch を指定しても引き伸ばされず「start」と同じになります。

space-between

アイテム間（between）の空きが同じサイズになるように分布します。

space-around

アイテム間の空きの「半分の空き」を最初と最後のアイテムの前後（around）につけて分布します。

space-evenly

アイテム間の空きと、最初と最後のアイテムの前後の空きを全部均等（evenly）にして分布します。

オーバーフロー時の整列キーワード

注意：<overflow-position>はW3C仕様書の冒頭で「at-risk」に入っていて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。
（2022年1月記）

アイテムの内容がオーバーフロー（コンテナからはみ出る）したとき、スクロールバーが出ても読めない場合にどうするか指定するキーワードです。
仕様書では <overflow-position> と呼ばれています。

キーワードは safe か unsafe だけ。
単独で使うのではなく、他の整列キーワードと組み合わせて使います。
（例：justify-content: safe center;）

それぞれのキーワードは、以下の意味があります。

safe

整列キーワードの「center」「end」などを使っていて、オーバーフローでスクロール不能な領域にデータがあって読めない場合、整列キーワードが「start」であったかのように配置します。

unsafe

一緒に指定された整列キーワードのままで配置します。

次回予告

次回から、ボックス配置のためのプロパティを1つずつ使ってみましょう。
まずは、justify-contentプロパティを使ってみます。