【flexbox】軸の方向を変更する方法【flex-direction】

レイアウトはフレックスボックスで行うと、特にレスポンシブ対応の際にいろいろと都合がよいです。ここではフレックスの「軸」について簡単に説明をしていきます。

コンテンツ

【flex-direction】軸の方向を変更する

デフォルトの状態だと主軸は横方向になっています(下図)

今回使用する flex-direction で軸の向きと開始位置をいろいろ変更することが可能です。

では以下で一つずつ確認していきましょう。

(※HTML、CSS、RESULTのボタンを押すと表示が切り替わります)

flex-direction: row

See the Pen
Untitled
by taichi (@taichi_na)
on CodePen.

これはデフォルトの状態です。

何も指定していないとこれになっています。

flex-direction: row-reverse

See the Pen
rowreverse
by taichi (@taichi_na)
on CodePen.

逆側からスタートになりました。
box1が向こう端に移動したのがわかると思います。

flex-direction: column

See the Pen
column
by taichi (@taichi_na)
on CodePen.

今度は縦になりました。主軸が縦になったということです。

flex-direction: column-reverse

See the Pen
Untitled
by taichi (@taichi_na)
on CodePen.

縦になり、スタートが下からになりましたね。

まとめ:flex-direction で軸の方向を変えることができる

最後の flex-direction: column-reverse の状態の主軸は上の図のようになっているということです。
それぞれ実際にブラウザで動きを確認して、感覚をつかんでください。
次回はflex-wrapを使って、自動改行されるように配置をしてみましょう!
コンテンツ