Chapter 07

様々なFlexboxレイアウト

Arisa Fukuzaki
Arisa Fukuzaki
2020.10.11に更新

さて、Flexboxは単純に要素を並列させるだけではありません。

並列をさせるだけでは、要素間に程よいスペースをあけたり、並列の順序を変えたり、折り返しをさせたりといった、バランスを保つ調整がないので、スタイルが整いません。

要素間のスペースはmarginなどで解決することもありますが、marginの値が大きくなったり、端末の大きさが変わるたびに、1px単位で微調整をしなければいけないことになります。

これはとても非効率ですよね。

Flexboxの最大のメリットは、要素の並列に加えて、以下のような便利なレイアウトも同時に指定できることです。

  • 均等なスペースを保って要素を並列させる
  • 端末の大きさが変わっても、パーセンテージを計算し、要素間のスペースを自動調整する
  • 並列する要素の順番を変えることができる etc...

これらは一部ですが、よく使用するFlexboxのレイアウトを、視覚的に実例と一緒に見ていきましょう。