Flexの主軸（main axis）と交差軸（cross axis）、Gridのインライン軸（inline axis）とブロック軸（block axis）およびそれぞれを制御するユーティリティクラスであるjustify-＊系とitems-＊／self-＊（align-＊ 系）の意味と使い方をまとめました。
主軸
主軸とは、flex-directionで決まる「要素が並ぶ方向」の軸（Gridの場合は行方向）です。
何も設定しない場合→主軸は横方向
flex-rowの場合→主軸は横方向
flex-colの場合→主軸は縦方向
交差軸
交差軸とは、主軸に直交する方向の軸です。
主軸が横の場合→交差軸は縦
主軸が縦の場合→交差軸は横
インライン軸
文章の行が流れる方向、つまり横方向（行方向）
ブロック軸
段落などのブロックが積み重なる方向、つまり縦方向（列方向）
justify-＊系（CSSのjustify-contentに相当）
justify-＊系（justify-start, justify-centerなど）は、主軸（インライン軸）上の子要素の配置を制御します。
justify-start：左端に寄せる
justify-center：中央に寄せる
justify-end：右端に寄せる
justify-between：両端寄せ＆間を均等に配置
justify-around：各要素の前後を均等に配置
justify-evenly：要素間のスペースを等間隔に配置
items-＊系（CSSのalign-itemsに相当）
items-＊系（items-start, items-centerなど）は、交差軸（ブロック軸）上の子要素の全体揃えを制御します。
items-start：上端に揃える
items-center：中央に揃える
items-end：下端に揃える
items-baseline：テキストのベースラインで揃える
items-stretch：高さ／幅を引き延ばして揃える（デフォルト）
self-＊（CSSのalign-selfに相当）
self-＊系（self-start, self-centerなど）は、交差軸上で個別の子要素を揃えるときに使います。
self-start：自分だけ上端に揃える
self-center：自分だけ中央に揃える
self-end：自分だけ下端に揃える
self-auto：子要素の揃えを親のitems-＊に従う
self-stretch：自分だけ高さいっぱいに伸ばす