#何を伝えたいのか
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での横並びを解説しているブログやら記事やらがあるのか...😓）