1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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
特徴 要素を浮動させる 子要素を整列させる 子要素をテーブル状に配置させる
使う場面 テキストの回り込み 横並びのレイアウト 格子状のレイアウト
応用性
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?