【Flexbox】flex-directionでアイテムの並びの向きと方向を変える。
Flexbox内で親要素にあたるフレックスコンテナにflex-directionプロパティを設定すると、
子要素であるフレックスアイテムの並びの向きと、並んでいく方向を変更する事ができます。
※フレックスコンテナとフレックスアイテムの関係および、flexプロパティの基本については前回のこちらの記事を参照ください。
displayプロパティでflexとした場合、フレックスコンテナである子要素は通常左側を起点に行方向へ横並びとなリます。
– CSS –
|
1 2 3 4 5 6 7 |
.container { width: 980px; margin: 100px auto; border: 2px solid #333; display: flex; } |
上記のスタイルに、flex-directionプロパティを追加し値をrow-reverseとすると、
並びの起点が変わり、右から順に並ぶようになります。
– CSS (flex-directionプロパティを追加する) –
|
1 2 3 4 5 6 7 8 |
.container { width: 980px; margin: 100px auto; border: 2px solid #333; display: flex; flex-direction: row-reverse;/* ←ここに記述 */ } |
右から東京、名古屋、大阪の順に並ぶ。
次は並びの方向を変えてみます。
flex-directionプロパティをこれまでのrowから列方向を表すcolumnへ変更してみます。
|
1 2 3 4 5 6 7 8 |
.container { width: 980px; margin: 100px auto; border: 2px solid #333; display: flex; flex-direction: column;/* ←ここを変更 */ } |
アイテムが列方向の縦並びとなりました。
ですが、この状態だとFlexboxにする前の通常のレイアウトと何も変わらないように見えますので先ほどのrow-reverseのように並びの向きを逆にしたいと思います。
flex-directionをcolumn-reverseとします。
|
1 2 3 4 5 6 7 8 |
.container { width: 980px; margin: 100px auto; border: 2px solid #333; display: flex; flex-direction: column-reverse;/* ←ここを変更 */ } |
下から順に並ぶようになりました。
このようにする事でHTMLに記述した順番と上下を逆向きに並ばせる事が出来ます。
例えば、日付のついた記事や見出しの表示順をあとから逆向きにしたいときなど、
ある程度の量があると手作業で変更するのは大変ですが、この仕組みを使う事で一度に並びを反転させる事が出来ます。
また、flex-directionプロパティを明示的に書かない場合はデフォルトでrow、つまり行方向の横並びとなります。
Flexboxについて、その他の仕様と実践的なレイアウト手法など今後も解説していきたいと思います。
Follow me!
