[CSS]flexboxとは？
CSSでレイアウトを決める時に活躍してくれるflexbox。
そのflexboxの使い方を理解できるように分かりやすく紹介していきます。
flexboxとは？flexboxの使い方
CSSでは要素を横並びにする時に様々な方法があります。
この時にfloatやinline-blockなど様々な方法がありますが、flexboxを使うことで簡単に実装することができます。
displayでflexプロパティを指定することで使うことができます。
flexbox内の要素の位置を調整する
そしてflexbox内の要素の位置も調整することができます。
- 要素内で等間隔に配置する
- 要素内で等間隔に配置する。両端の要素に余白を作る
- 左寄せ
- 右寄せ
- 中央寄せ
これはjustify-contentプロパティーの5つの値を用いることで実装できます。トップページの上部メニューなどで使えますね。
要素内で等間隔に配置する(space-between)
ボックス内に要素を等間隔で配置されます。ただし、両端の要素は特に余白を指定しなければ、詰まったような状態になりますね。
要素内で等間隔に配置する。両端の要素に余白を作る(space-around)
上記のspace-betweenでは要素が等間隔に配置されるも、両端の要素の余白が詰まっている状態でした。
両端にも余白を作る場合はspace-aroundを使います。
両端にも余白が生まれます。
左寄せ(flex-start)
次にflexbox内の要素を左寄せにする方法を紹介します。
この場合は、flex-startを用いることで実装できます。
右寄せ(flex-end)
次は要素の右寄せになります。これは、flex-endで実装できます。
中央寄せ(center)
最後は中央寄せになります。
一つの要素は左寄せ、それ以外の要素は右寄せ
では、こういったケースではどうでしょうか？
トップメニューで、ロゴだけを左寄せしてそれ以外のメニューを右寄せにする場合です。
こうしたレイアウトはよく見かけますよね。
