Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| flex-direction | フレックスコンテナの主軸の方向を指定 | row(初期値)・row-reverse・ column・column-reverse |
CodePenで動作チェック
flex-direction(主軸横/初期値)・・・フレックスコンテナの主軸を横方向に並べる
See the Pen flex-direction by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
flex-direction(主軸縦)・・・フレックスコンテナの主軸を縦方向に並べる
See the Pen プロパティ:flex-direction(主軸は縦方向) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
プロパティ「flex-direction」の値によるそれぞれの挙動は以下でも確認できます。
flex-directionプロパティの値による挙動の違い
CSS Demo: flex-direction (mozilla.net)
フレックスボックスの主軸を横か縦のどちらかに指定するプロパティ
「主軸」は子要素の並ぶ方向を指しており「横方向」と「縦方向」のどちらかに決めます。
「主軸」をどちらかに決めたことで、自動的に「交差軸」が交差した方向に決まります。
なお「主軸」は「flex-direction」というプロパティで指定を行い、初期値は「横:row」です。
値に「row」もしくは「row-reverse」を指定すると「主軸」は横方向、「交差軸」は縦方向になり、
「column」もしくは「column-reverse」を指定すると「主軸」は縦方向、「交差軸」は横方向になります。