floatとflexboxとgrid比較

前置き

floatとflexboxとgridはそれぞれ、要素を横並びにすることができるCSSのプロパティや値です。
Webページを作る上で最も大事なこととなるので、使い分けできるようにしましょう。

この記事で分かること

• テキストの回り込みをしたい場合は、floatを使う
• 横並びのレイアウトをしたい場合は、flexboxを使う
• 格子状のレイアウトをしたい場合は、gridを使う

それぞれの特徴

float

指定した要素を左または右に浮動させ、後ろの要素を回り込みます。
ブログなどで、文字の途中に画像を入れる時にしか今は使わないかもしれません。

flexbox

指定した要素の子要素を整列させます。
子要素の配置を調整しやすいので、横並びの中でもちょっと段を変えたりなども可能です。

grid

指定した要素の子要素をテーブル状(行・列)に配置します。
子要素の幅や高さを親要素(gridを指定している要素)で指定することができます。

それぞれのコード

float

See the Pen CSS_compare_float by engineerhikaru (@engineerhikaru) on CodePen.

flexbox

See the Pen CSS_compare_flexbox by engineerhikaru (@engineerhikaru) on CodePen.

grid

See the Pen CSS_compare_grid by engineerhikaru (@engineerhikaru) on CodePen.

それぞれの特徴を生かしたコード

float

See the Pen CSS_compare_float_ex by engineerhikaru (@engineerhikaru) on CodePen.

flexbox

See the Pen CSS_compare_flexbox_ex by engineerhikaru (@engineerhikaru) on CodePen.

grid

See the Pen CSS_compare_grid_ex by engineerhikaru (@engineerhikaru) on CodePen.

まとめ

ただ横並びにするだけであれば、どれを使っても問題はありませんが、
記事の最初に書いた通り、私の場合は下記のように使い分けています。

• テキストの回り込みをしたい場合は、floatを使う
• 横並びのレイアウトをしたい場合は、flexboxを使う
• 格子状のレイアウトをしたい場合は、gridを使う

特にflexboxは、モダンなレイアウトなサイトを作る時に有効ですので、まずこれを習得したいです。

	float	flexbox	grid
特徴	要素を浮動させる	子要素を整列させる	子要素をテーブル状に配置させる
使う場面	テキストの回り込み	横並びのレイアウト	格子状のレイアウト
応用性	△	◎	○