こんにちは朱夏です。
今回は、CSSで要素を横並びにする2つの方法、「inline-block」と「flexbox」を比較してみた。
今回この記事を書くきっかけとなったしもむらさんの「flexbox」の解説動画。
これを見て「flexbox」めっちゃすごいってなったわけなんですが、沸き上がった疑問がこちらです。
要素を横並びにする方法いっぱいあるよな。
よく使う「inline-block」と「flexbox」だとどっちがいいんだろう？
というわけで、「inline-block」と「flexbox」それぞれの特徴や違いを比較していきたいと思います。
それではいってみましょう。
inline-blockの特徴
flexboxの特徴
結局どっちがいいの？
あとがき
inline-blockの特徴
「inline-block」は、<div>などblockタイプの要素を、<span>の様なinlineタイプの様に扱うことが出来るようにします。
サンプルコードはこんな感じになります。
See the Pen
LYVJPXy by 朱夏 (@syunatsu1)
on CodePen.
特徴を以下にまとめてみました。
- 要素ごとに個別に指定できる
- inlineタイプの要素と同じ様に配置出来る
- blockタイプの要素と同じ様に幅と高さを設定できる
画面横幅による折り返しも、inlineタイプの要素と同じ様に折り返されます。
コードはこんな感じになります。
See the Pen
ZEGMEyB by 朱夏 (@syunatsu1)
on CodePen.
flexboxの特徴
flexboxの特徴としては、複数の子要素を一括で横並びを設定できることが挙げられます。
サンプルコードはこちらです。
See the Pen
OJVoLYa by 朱夏 (@syunatsu1)
on CodePen.
親要素に「display: flex;」を書くだけで、子要素が全て横並びになりました。
flexboxの大きな特徴としてもう一つ挙げられるのは、「横並びの並び方、折り返し方を指定できる事」があります。
上記のサンプルのdivの大きさを変更して、横幅を変更してみました。
すると、inline-blockと違い折り返しが起こりません。
See the Pen
zYGJYow by 朱夏 (@syunatsu1)
on CodePen.
折り返したい場合は「flex-wrap: wrap;」を使います。
更に、中央寄せで均等配置する「justify-content: space-around;」なども使えます。
この2つを設定したサンプルコードはこちらになります。
See the Pen
abOabYE by 朱夏 (@syunatsu1)
on CodePen.
特徴をまとめると以下になります。
- 親要素から一括設定できる
- 折り返しの有無を自分で決める事が出来る
- 均等配置や逆順配置など、配置方法が色々ある
配置方法については他にも色々用意されているので、気になる人は調べてみてください。
結局どっちがいいの？
結局どっちを使うのが良いのかというと、私の答えとしては基本は自由度の高い「flexbox」で良いと思います。
ただ、「flexbox」は子要素全てに影響してしまうのでピンポイントで要素を横並びにしたい場合は「inline-block」を使うのが良いと思います。
最終的には場面ごとの使い分けをするのが最適だと思いますが、自分に合った方をメインにしておくと迷わずに済んで良いのではないでしょうか。
あとがき
というわけで、今回は「inline-block」と「flexbox」を比較してみました。
今回のまとめはこちら。
- 「inline-block」は要素を個別に設定
- 「inline-block」は「inline」タイプの要素の様に扱われる「block」
- 「flexbox」は親要素から一括で設定
- 「flexbox」の方が自由度が高いが子要素全てに影響する
- 結論、使い分けが肝心だが、メインを決めると迷わない
要素を横並びにする方法は他にも色々あって、それぞれ特徴や得手不得手があります。
自分の使いやすい方法をメインで使用して、その方法では実現できない、もしくは実現が難しい機能を実装する時は、別の方法を試してみるというやり方が個人的にはお勧めです。
今回は以上になります。
次回もよろしくお願いします。
