Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@kotarofunyu

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

More than 1 year has passed since last update.

何を伝えたいのか

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

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kotarofunyu
早大4年 / 内定先でRailsエンジニアをしています / フロントもサーバーもインフラもやりたい筋肉エンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?