「 align-items 」は(通常配列の場合)縦方向の余白の埋め方を指定するが、「 align-self 」を使うと、さらにアイテムごとに個別に指定できるというので試してみる。 まず、通常並べただけ。
1
2
3
4
5
6
何も指定しなければ「 stretch 」が規定値なので、余白が埋まるように伸長される。 「 flex-start 」を指定すると、上に寄る。↓
1
2
3
4
5
6
これに、アイテムごとに個別に「 align-self 」を指定してみると 1: flex-start 2: center 3: stretch 4: flex-end 5: space-around 6: space-between
1
2
3
4
5
6
「 space-around 」と「 space-between 」はないんですね。 ・・・アイテムが折返されないと意味がないんでしたっけ？ アイテムを増やしてみる↓
1
2
3
4
5
6
7
8
9
10
11
12
アイテムが折返される場合は「 align-items 」ではなくて「 align-content 」にするんでした。 やってみたら・・・↓
1
2
3
4
5
6
7
8
9
10
11
12
「 align-self 」は「 align-items 」だけで、「 align-content 」では効かないんですねぇ・・・(当たり前か)
コメント