HTML&CSS

Flexboxとfloatをきちんと使い分けよう

ProgateでFlexboxを学習したので、復習の意味もこめてまとめていきます。

Flexboxとは?

Flexboxとは(Flexible Box Layout Module)の略で、柔軟な・融通のきくボックスレイアウトのモジュールになります。ボックスレイアウトは四角形であるボックス要素の組み合わせで作るレイアウトってことですね。

ブロックレイアウトはHTMLでの基本となりますから、それが柔軟に作成できるということなので嬉しいですね。

ブロックレイアウトをしようとするとfloatを思い浮かべますが、floatは要素を回り込ませることで横並びを表現させていましたが、Flexboxではそれをもっと簡単に自然な形で実現できるようになります。

よく使うプロパティ

以下のようなHTMLを例にFlexboxでできることを見ていきます。

要素を横並びにする

子要素を横並びにしたい場合は、親要素に「display: flex;」を指定します。ちなみに「display: flex;」はFlexboxを使用する上で基本となるプロパティで、これを指定しないとこのあとのプロパティを指定しても効果はありません。

ちなみにfloatを使用した場合です。

floatは要素が「浮いている」状態となるので、親要素が子要素の高さが把握できなくなり、親要素の高さが0になってしまっています(親要素に高さを指定していれば指定した高さとなる)。Flexboxは親要素の箱の中に配置されていることになるので、ここが大きく違うところですね。

親要素の幅に合わせて要素の幅を伸ばす

子要素に「flex: auto;」を指定すると親要素いっぱいに子要素の幅を伸ばすことができます。

子要素全てに「flex: auto;」を指定すると親要素の幅に対して各要素が均等に幅を伸ばすことができます。一方で一部のみに「flex: auto;」を指定した場合は、指定していない要素の幅の余り分幅が伸びることになります。

子要素を折り返して表示する

子要素の幅が親要素を超える場合に折り返して表示したい場合は親要素に「flex-wrap: wrap」を指定します。

ちなみに「flex-wrap; wrap:」を指定しない場合は折り返ししないようになっており、親要素の幅に収まるように子要素の幅が自動で調整されます。

ためしに子要素の幅を親要素の幅を超える1000pxに指定してみます。

1行の幅におさまるように自動で幅が調整されていることがわかると思います。

子要素を上縦に並べる

子要素を横ではなく縦に並べる場合は親要素に「flex-direction: column」を指定します。

Flexboxとfloatとの使い分け

floatの効果は要素を回り込みさせるというもので本来は要素横並びさせるためのものではありません。なので、要素を横並びする場合はFlexboxを使用し、以下のようにテキストを画像等の横にテキストを回り込ませる場合等に使用するようにすべきです。

まとめ

  • Flexboxを使えば子要素の配置を柔軟に指定できる
  • floatは要素を回り込みさせたい時に使い、横並びにはFlexboxを使用する
  • まだまだプロパティはいっぱいある
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す