floatとflexboxとgrid比較

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

## この記事で分かること

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

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

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

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

## それぞれのコード
### float
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="KKdLObp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_compare_float">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/KKdLObp">
  CSS_compare_float</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### flexbox
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="MWadNZy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_compare_flexbox">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWadNZy">
  CSS_compare_flexbox</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### grid
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="pojmMqj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_compare_grid">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/pojmMqj">
  CSS_compare_grid</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## それぞれの特徴を生かしたコード
### float
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="engineerhikaru" data-slug-hash="ZEbNgZB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_compare_float_ex">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ZEbNgZB">
  CSS_compare_float_ex</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### flexbox
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="rNOEBVw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_compare_flexbox_ex">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/rNOEBVw">
  CSS_compare_flexbox_ex</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### grid
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="wvKLwvw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_compare_grid_ex">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKLwvw">
  CSS_compare_grid_ex</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

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

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