Flex nowrap
効かない
1
2
3
display: flex;
flex-wrap: nowrap;
align-content: end;
CSS BOX ALIGNMENT
align系の違いを目で整理する
縦の align、横の justify。対象は items / content / self。 全部その場で動かして、生成されるCSSと一緒に確認できます。
align-*block axis / 縦
items
content
self = C
justify-*inline axis / 横
items
content
self = C
A
B
Cself
D
図は横書きのGrid前提です。Flexでは justify-content が main axis、align-* が cross axis 側になります(justify-items / justify-self はFlexでは使いません)。
WHY ALIGN-CONTENT SOMETIMES DOES NOTHING
align-content は flex-wrap: nowrap では効かない
grid専用ではありません。flexでも flex-wrap が nowrap 以外なら効きます。 見た目が複数行かどうかではなく、single-line flex container かどうかがポイントです。
Flex wrap / 1 line
効く
1
2
3
display: flex;
flex-wrap: wrap;
align-content: end;
Grid tracks
効く
1
2
3
4
display: grid;
align-content: end;
items
各アイテム
content
行/トラック全体
self
その要素だけ
place
align と justify