ホーム / PC全般 /

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

2021/11/30

PC全般

t f B! P L

導入


【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を使って、自動改行されるように配置をしてみましょう！




QooQ