こんにちは、ダイキです。
「CSSで要素をキレイに配置するの面倒くさい」
「簡単に実装できるやつないの？」
そんな悩みを解決するレイアウトモジュールをざっくり紹介します。
————————————————————————————————————————
目次
1. Flexboxとは
2. Flexboxの使い方
3. flexコンテナ
4. flexアイテム
————————————————————————————————————————
1. Flexboxとは
・flexアイテムと呼ばれる複数の子要素
・flexコンテナと呼ばれるflexアイテムの親要素
この2つで構成されています。
————————————————————————————————————————
2. Flexboxの使い方
Flexboxを使うのは簡単です。
HTMLの親要素にCSSで「display: flex;」を指定するだけです。
「display: flex;」を指定した要素がflexコンテナになります。
————————————————————————————————————————
3. flexコンテナ
要素の配置はflexコンテナに値を指定するだけで、簡単にできます。
・flex-direction（横並びと縦並び）
要素を水平方向に右からor左から並べる、垂直方向に上からor下から並べる。
このように並び方を指定することができます。
・justfy-content（寄せと間隔）
flexアイテムの
左寄せ、右寄せ、中央寄せ、等間隔など様々な配置ができます。
他にもありますが、上の2つのように簡単にレイアウト構成ができます。
————————————————————————————————————————
4. flexアイテム
flexアイテム1つ1つの配置やサイズなどの設定ができます。
・flex-grow（アイテムの伸長係数の比率）
flexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定できます。
例）要素が4つあったときに1 : 1 : 3 : 1のように大きさを変えることができます。
他にもありますが、上のように簡単にflexアイテムの設定ができます。
「float」や「clear」や「vertical-align」はflexアイテムに影響を与えません。
————————————————————————————————————————
というわけで、今回は以上になります。
さらに知りたい方は以下のサイトを参考にしてみてください。
【参考】
最後まで読んでいただき、ありがとうございました。