【Flexbox】flex-directionでアイテムの並びの向きと方向を変える。

Flexbox内で親要素にあたるフレックスコンテナにflex-directionプロパティを設定すると、
子要素であるフレックスアイテムの並びの向きと、並んでいく方向を変更する事ができます。

※フレックスコンテナとフレックスアイテムの関係および、flexプロパティの基本については前回のこちらの記事を参照ください。

displayプロパティでflexとした場合、フレックスコンテナである子要素は通常左側を起点に行方向へ横並びとなリます。

– CSS –

上記のスタイルに、flex-directionプロパティを追加し値をrow-reverseとすると、
並びの起点が変わり、右から順に並ぶようになります。

– CSS (flex-directionプロパティを追加する) –

右から東京、名古屋、大阪の順に並ぶ。

次は並びの方向を変えてみます。

flex-directionプロパティをこれまでのrowから列方向を表すcolumnへ変更してみます。

アイテムが列方向の縦並びとなりました。

ですが、この状態だとFlexboxにする前の通常のレイアウトと何も変わらないように見えますので先ほどのrow-reverseのように並びの向きを逆にしたいと思います。

flex-directionをcolumn-reverseとします。

下から順に並ぶようになりました。

このようにする事でHTMLに記述した順番と上下を逆向きに並ばせる事が出来ます。

例えば、日付のついた記事や見出しの表示順をあとから逆向きにしたいときなど、
ある程度の量があると手作業で変更するのは大変ですが、この仕組みを使う事で一度に並びを反転させる事が出来ます。

また、flex-directionプロパティを明示的に書かない場合はデフォルトでrow、つまり行方向の横並びとなります。

Flexboxについて、その他の仕様と実践的なレイアウト手法など今後も解説していきたいと思います。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください