search
LoginSignup
4

More than 3 years have passed since last update.

Organization

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

何を伝えたいのか

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4