「flex-direction」は並び方を横に並ばせるか縦にならばせるかを指定する。 「flex-direction:row;」だと横並び（左から右へ） 「flex-direction:column;」だと縦並び（上から下へ）
例１ rowを指定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
アイテムは横に並べられていき、親要素の幅を超えるところで下方向に折り返される。（下方向には無限に伸びていく。）
例２ columnを指定(高さ200px)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
columnが指定されていると、縦（下方向）にアイテムが並べられていき、指定した高さを超えるところで右方向に折り返される。（右方向には無限に伸びていく）
例３ columnを指定(高さ100px)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
面白いなと思ったのは、アイテムの最低幅を指定している（min-width:4em;)と、高さが閾値を超えない範囲＝つまり高さの中に収まっている範囲では、最低幅の指定を無視してアイテム幅を縮めて表示されるが、閾値を超えた瞬間＝つまり指定された高さでは収まらない＝３段作れない高さになった瞬間(108pxだった)、アイテムの最低幅が指定値に戻って枠からはみ出して表示されるという挙動をする感じ？
ちなみに、高さを指定していない領域にcolumnを指定すると・・・
1
2
3
4
5
6
7
8
9
10
11
12
下方向に無限に伸び、折返しポイントが来ないので、縦一列にしかならない
基本的に縦スクロールのWEBページではrowしか使わない気がするけれど、スマホ用サイトに対応させる時に使えるかも？（幅を制限すればよいだけの気も）
ちなみに、flex-direction は指定値に「-reverse」をつけると逆順になる。 「flex-direction:row;」左→右 「flex-direction:row-reverse;」右→左 「flex-direction:column;」上→下 「flex-direction:column-reverse;」下→上
幅が可変になっているアイテムは、marginをautoにしていると余白を埋めるように広がるわけですが、幅が固定されているアイテムで、中央寄せしたい場合にはどうするか？ ⇒「justify-content」を使う 例：「justify-content:center;」でアイテムが中央寄せされます。
center
アイテムを中央に寄せる
start
アイテムを先頭に寄せる
end
アイテムを末尾に寄せる
flex-start
フレックスアイテムを先頭に寄せる
flex-end
フレックスアイテムを末尾に寄せる
left
アイテムを左端に寄せる
right
アイテムを右端に寄せる
space-between
残り余白の均等割り
space-around
左右余白 ＋ 均等割り
※「right」「end」はFirefox以外では効かないようです。 （※確認環境はFirefox61, GoogleChrome68, IE11, Edge42です。） 「Flex-end」ではすべて右寄せになりました。 もしかしたら Firefox 以外でも更新されれば、適用されるようになるかも知れませんが、分かりません。
コメント