【floatを使うな】横並びはdisplay:flexを使おう！

#何を伝えたいのか
HTML&CSSを勉強したての頃に、横並びのやり方がわからなくてググると思います。
何を使えばパーフェクトか→display: flex;です！
いいですか、display:flex;を使ってくださいね(?)
#なぜdisplay: flexがいいのか
素晴らしい魔法を使えるからです。
今やWebデザインではグリッドレイアウト、複数カラムが当たり前になっております。
それに適応するような形で、CSS3がdisplay: flexというチートを生み出しました...。
The Survival of the Fittest.ですね
#どう使うのか
横並びにしたい要素をdiv等で包んであげます。
包んだdivに対してdisplay: flex;を指定してあげるだけ！これで横並びになる！！簡単だね！
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="kotarofunyu" data-slug-hash="eYmQVZd" 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="eYmQVZd">
  <span>See the Pen <a href="https://codepen.io/kotarofunyu/pen/eYmQVZd">
  eYmQVZd</a> by kotarofunyu (<a href="https://codepen.io/kotarofunyu">@kotarofunyu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
#flexはいろんな魔法を持っている！
###魔法1. 間に余白をあけたいんだけど
display:flexにプラスして、
justify-content: space-between;を追加してあげる✨
space-between = 「間にスペース」😁
※子要素の横幅の和 < 親要素の横幅の場合のみ
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="kotarofunyu" data-slug-hash="bGNQLBX" 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="bGNQLBX">
  <span>See the Pen <a href="https://codepen.io/kotarofunyu/pen/bGNQLBX">
  bGNQLBX</a> by kotarofunyu (<a href="https://codepen.io/kotarofunyu">@kotarofunyu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
###魔法2. 余白を均等にしたいのだけれども
display:flexにプラスして、
justify-content: space-around;を追加してあげる✨
space-between = 「周りにスペース」😁
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="kotarofunyu" data-slug-hash="YzPReZO" 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="YzPReZO">
  <span>See the Pen <a href="https://codepen.io/kotarofunyu/pen/YzPReZO">
  YzPReZO</a> by kotarofunyu (<a href="https://codepen.io/kotarofunyu">@kotarofunyu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
###魔法3. 中央寄せにしたいんだけれども
display:flexにプラスして、
justify-content: center;を追加してあげる✨
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="kotarofunyu" data-slug-hash="zYxMRwz" 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="zYxMRwz">
  <span>See the Pen <a href="https://codepen.io/kotarofunyu/pen/zYxMRwz">
  zYxMRwz</a> by kotarofunyu (<a href="https://codepen.io/kotarofunyu">@kotarofunyu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
###魔法4. レスポンシブで縦並びにしたいんだけれども
display:flexにプラスして、
flex-direction: column;を追加してあげる✨
これはめちゃくちゃ使えますよね☺️

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="kotarofunyu" data-slug-hash="zYxMRzd" 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="zYxMRzd">
  <span>See the Pen <a href="https://codepen.io/kotarofunyu/pen/zYxMRzd">
  zYxMRzd</a> by kotarofunyu (<a href="https://codepen.io/kotarofunyu">@kotarofunyu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###魔法5. 縦の中央寄せしたいんだけれども
display:flexにプラスして、
align-items: center;を追加してあげる✨
実務でよく使う😁てか、こういうデザインが多い☺️
すごくないですか？？
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="kotarofunyu" data-slug-hash="zYxMREd" 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="zYxMREd">
  <span>See the Pen <a href="https://codepen.io/kotarofunyu/pen/zYxMREd">
  zYxMREd</a> by kotarofunyu (<a href="https://codepen.io/kotarofunyu">@kotarofunyu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#まとめ
display: flex;がいかに最強かをお分かりいただけただろうか...
display: flexに付随して使える魔法たちも紹介してきましたが、この魔法たちはdisplay: flexちゃんがいないと発動しないので注意してくださいね✨
魔法は他にもいっぱいあり、だいたいのことはflexと魔法たちで実現できます！調べてみてください😁
(なんで今時 floatでの横並びを解説しているブログやら記事やらがあるのか...😓）