何を伝えたいのか

HTML&CSSを勉強したての頃に、横並びのやり方がわからなくてググると思います。
何を使えばパーフェクトか→display: flex;です！
いいですか、display:flex;を使ってくださいね(?)

なぜdisplay: flexがいいのか

素晴らしい魔法を使えるからです。
今やWebデザインではグリッドレイアウト、複数カラムが当たり前になっております。
それに適応するような形で、CSS3がdisplay: flexというチートを生み出しました...。
The Survival of the Fittest.ですね

どう使うのか

横並びにしたい要素をdiv等で包んであげます。
包んだdivに対してdisplay: flex;を指定してあげるだけ！これで横並びになる！！簡単だね！

See the Pen
eYmQVZd by kotarofunyu (@kotarofunyu)
on CodePen.

flexはいろんな魔法を持っている！

魔法1. 間に余白をあけたいんだけど

display:flexにプラスして、
justify-content: space-between;を追加してあげる✨
space-between = 「間にスペース」😁
※子要素の横幅の和 < 親要素の横幅の場合のみ

See the Pen
bGNQLBX by kotarofunyu (@kotarofunyu)
on CodePen.

魔法2. 余白を均等にしたいのだけれども

display:flexにプラスして、
justify-content: space-around;を追加してあげる✨
space-between = 「周りにスペース」😁

See the Pen
YzPReZO by kotarofunyu (@kotarofunyu)
on CodePen.

魔法3. 中央寄せにしたいんだけれども

display:flexにプラスして、
justify-content: center;を追加してあげる✨

See the Pen
zYxMRwz by kotarofunyu (@kotarofunyu)
on CodePen.

魔法4. レスポンシブで縦並びにしたいんだけれども

display:flexにプラスして、
flex-direction: column;を追加してあげる✨
これはめちゃくちゃ使えますよね☺️

See the Pen zYxMRzd by kotarofunyu (@kotarofunyu) on CodePen.

魔法5. 縦の中央寄せしたいんだけれども

display:flexにプラスして、
align-items: center;を追加してあげる✨
実務でよく使う😁てか、こういうデザインが多い☺️
すごくないですか？？

See the Pen
zYxMREd by kotarofunyu (@kotarofunyu)
on CodePen.

まとめ

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