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





1981年生まれ。北海道在住。現在無職でアルバイトをしながらプログラミングを勉強中。木工を長らくしていたのでそちらの知識と技能はあります。ミニマリスト/ヴィーガン/アフリカに4年

カテゴリー別に記事を探す

このブログを検索

Contact

名前

メール *

メッセージ *

QooQ

TOP