混乱したのでまとめました...
- Flexbox ... １次元
1.1. align-content ... 上下
1.2. justify-content ... 左右 - Grid Layout ... ２次元
2.1. align-items ... 上下
2.2. justify-items ... 左右
flex-direction に column を指定すると以下のように変わるので注意してください（初期値は row）。自分はハマりました。
- Flexbox ... １次元
1.1. align-content ... 左右
1.2. justify-content ... 上下
1. Flexbox と Grid Layout
1.1. Flexbox
ようするに一次元...
フレックスボックスの基本概念
フレキシブルボックスレイアウトモジュールは、 通常フレックスボックスと呼ばれ、一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。
1.2. Grid Layout
ようするに二次元...
グリッドレイアウトの基本概念
CSS グリッドレイアウトは、二次元グリッドシステムを CSS にもたらします。
2. align と justfiy
2.1. align
上下の調整。align-items: center, align-content: center なら上下中央になる。
align
1.〔～を〕一直線［平行］にする［並べる］
2.〔部品などを〕調整する、調節する
3.〔大義や方針で～を〕同じ立場に置く、提携させる
3 の同じ立場に置くが上下のニュアンスがあるなと思いました。以下の図の EQUITY が align-items: center のイメージに近いのかなと思いました。
あと alliance, 同盟とかも確かに対等な立場の意味合いがありそうな感じがします。以下はスターアライアンスのマークですが 傘連判状 みたいに円形のデザインになっています、上下関係の対等な同盟ということを意味したいのでしょうか...
スターアライアンス は、1997年5月14日に設立された、世界初で世界最大の航空連合。 その加盟会社による就航国は190カ国余り、1,300以上の空港に達し、1日当たりの便数は21,000便を超える。アライアンス・スローガンは「The Way The Earth Connects」。
2.2. justify
左右の調整。justify-items: center, align-content: center なら左右中央になる。
justify
3.《編集》〔行の左端または右端を〕そろえる
天秤の左右の釣り合いのイメージから justify で左右中央なのでしょうか... いらすとや、なんでもあって笑ってしまう...
ギリシャ神話に登場する法の女神（正義の女神）、テミスの目隠しをしていない状態としている状態のイラストです。裁判所などによく像が飾られています。
テミスのイラスト
3. items と content
3.1. content
主に Flexbox に対して使用される...はず
なんで items は s がつくのに content は s がつかないんだよ〜、って思ったら通例単数形のみだそうです... 英語わからん... メリケン人の頭の中どうなってるんや...
content
1. 〔容器などの〕内容物、中身◆通例、contents
7. 《コ》コンテンツ、内容◆電子的に利用可能な情報・画像・映像など。◆【用法】通例、単数形のみ。
3.2. items
主に Grid Layout に対して使用される...はず
以下の中だと 3 番が一番近いんでしょうか... Flexbox で最も意味が近い content を使ってしまったから、Grid Layout ではつぎに意味がそれっぽい items を選んだみたいな感じだと思います。
- 〔一覧の中の〕項目、品目
- 〔法律などの〕条項、箇条
- 〔製造される〕品物、商品、製品
- 〔こまごました〕事柄、情報