displayプロパティってよく使いますよね。blockとか特に。
でも今回は「要素の横並び」についてまとめてみましたので、誰かの役に立てば幸いです。
まず今回はdisplayプロパティについてなのでfloatは無視して進めていきます。
displayプロパティの値
まずはdisplayプロパティの値は何があるのかをまとめておきます。
と言ってもdisplayプロパティの値はたくさんあるので「MOZILLA DEVELOPER NETWORK(MDN)」のdisplay概要を貼っておきますので興味があるかたはご覧ください。
ということで今回はdisplayプロパティの中でも「inline」「inline-block」「table-cell」「flex」について書いていこうと思います。
inline
横並びにしたい要素に対してdisplay:inlineを指定して横並びにします。
inlineの難点は親要素を突き破ってしまうことと、左右に隙間が空いてしまうことです。
左右の隙間の解消法はこちらの記事を参照してください。
[CSS]display:inline-blockでできる隙間をなくす方法（inlineにも使えます）
またinlineはwidth、height、上下マージンは無視されてしまいます。
See the Pen rWwKEL by mitsuki sagayama (@sagayama) on CodePen.
inline-block
inline-blockも横並びにしたい要素に対してdisplay:inline-blockを指定します。
親要素は突き破りませんが、inline同様、左右に隙間が空いてしまいます。
解消法は下の記事をごらんください。
[CSS]display:inline-blockでできる隙間をなくす方法
inline-blockはwidth、height、margin、paddingすべて効きます。
See the Pen PbjBzL by mitsuki sagayama (@sagayama) on CodePen.
table-cell
横並びにしたい要素にたいしてdisplay:table-cellを指定します。
table-cellはマージンが無視されてしまいます。
tdのような扱いができる値です。
See the Pen ENXppQ by mitsuki sagayama (@sagayama) on CodePen.
flex
flexはCSS3プロパティです。
横並びにしたい要素の親要素にdisplay:flexを指定します。
一番の難点はIEが全滅という点でしょうね。
See the Pen pNwVOZ by mitsuki sagayama (@sagayama) on CodePen.
まとめ
要素を横並びにするためには、どうしたらいいか？（displayを使って）
という内容で書いてきましたが、inlineはwidth、height、上下マージンが無視されて融通がきかなそう、table-cellはマージンが無視される、flexはIE全滅。
というわけで今のところinline-block一択でお仕事はしております。
隙間をどう埋めるかがありますが、使い勝手の良いプロパティだと思います。
ただぶっちゃけちゃうとmainとasideなどのレイアウトにはまだfloatを使ってます。
理由は使い慣れてるからです。
その他の細かいレイアウトはinline-blockです。そろそろ統一して書かないとですね。
