Flexbox/inline-block/floatの横並び実装の比較と使い分け

Flexbox、インラインブロック、フロート、による横並びデザインの実装方法の比較を紹介します。

また、それぞれの手法の使い分けについて説明します。

Flexboxを利用した横並びの実装方法

FlexboxとはCSS3から導入されたレイアウトに関する機能です。Flexboxを利用することで行あるいは列の1次元レイアウトを簡単に実現できます。

Flexboxの詳細解説はFlexboxの概要と使いどころで紹介しています。

具体的なコードは以下の通りです。

<div class="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

.container {
  width:270px;
  border: dotted; /* 境界をわかりやすくするために追加 */
  display: flex;
}

.item {
  width: 60px;
  height: 60px;
  background-color: lightblue;
}

.item:not(:last-child) {
  margin-right: 10px;
}

See the Pen flexbox-lines by Toshiharu Nishina (@nishina555) on CodePen.

上記のコードについて解説します。 Flexboxの`justify-content`（主軸に関する配置）の初期値は`flex-start`（先頭順）です。ですので、初期状態でFlexアイテムは画面左側へ詰められた状態になります。 詰められたFlexアイテムに`margin-right`を適用することで適切な間隔を要素同士に持たせています。 `.item:not(:last-child)`でマージンを指定しているのはUIパーツの再利用性を高めるCSS設計のテクニックです。詳細は[last-childのmarginを0にして再利用しやすいCSS設計をする](/last-child-margin-zero/)で紹介しています。

参考: Flexアイテムの間隔(余白)をmarginの代わりにgapで作成する

gapは行の隙間を定義するrow-gapと、列の隙間を定義するcolumn-gapの一括指定プロパティです。

marginの代わりにgapを利用したFlexアイテムの横並び例は以下の通りです。

<div class="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

.container {
  width:270px;
  border: dotted; /* 境界をわかりやすくするために追加 */
  display: flex;
  gap: 0 10px;
}

.item {
  width: 60px;
  height: 60px;
  background-color: lightblue;
}

See the Pen Untitled by Toshiharu Nishina (@nishina555) on CodePen.

インラインブロックを利用した横並びの実装方法

インラインブロックはブロックレベル要素とインライン要素の両方の性質を兼ね備えた表示形式です。

インラインブロックのイメージは『横に並ぶブロックレベル要素』です。

インラインブロックの詳細は【CSS】ブロック/インライン/インラインブロックの違いについてで解説しています。

具体的なコードは以下の通りです。

<div class="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

.container {
  width:270px;
  border: dotted; /* 境界をわかりやすくするために追加 */
  letter-spacing: -1em;
}

.item {
  width: 60px;
  height: 60px;
  background-color: lightblue;
  display: inline-block;
  letter-spacing: normal;
}

.item:not(:last-child) {
  margin-right: 10px;
}

See the Pen inlineblock-lines by Toshiharu Nishina (@nishina555) on CodePen.

上記のコードについて解説します。 `display: inline-block`で要素を横並びにしています。 `letter-spacing`プロパティは[【CSS】インラインブロックで勝手にできる余白の削除方法](/fix-inline-block-margin/)でも紹介しているように、インラインブロックで勝手にできた余白を削除するためのものです。 `letter-spacing`で横並びの要素を詰めた後、`margin-right`で適切なマージンを調整しています。

フロートを利用した横並びの実装方法

具体的なコードは以下の通りです。

<div class="container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

.container {
  width: 270px;
  border: dotted; /* 境界をわかりやすくするために追加 */
}

.container::after {
  content: "";
  display: block;
  clear: both;
}

.item {
  width: 60px;
  height: 60px;
  background-color: lightblue;
  float: left;
}

.item:not(:last-child) {
  margin-right: 10px;
}

See the Pen float-lines by Toshiharu Nishina (@nishina555) on CodePen.

上記のコードにある`::after`はclearfixと呼ばれるfloat解除の手法の1つです。floatの解除方法の詳細は[float解除(overflow: hidden/clear: both/clearfix)の比較と具体的な使い方](/clear-float-methods/)で紹介しています。

Flexbox/インラインブロック/フロートの使い分け

回り込みのデザインを実装する場合はフロート

フロートによる横並びの実装方法を紹介しましたが、最近のCSSではFlexboxもしくはインラインブロックを利用するケースがほとんどです。

しかし『回り込み』と呼ばれるデザインはフロートでしか実装できません。

ですので、回り込みを実装する場合はフロート、横並びを実装するときはFlexboxあるいはインラインブロックを利用候補として考えるとよいです。

インラインブロックはリストのような小さいパーツを横に並べる時に使われる

パンくずリストやページネーションのような横並びのパーツを作る際にインラインブロックがよく使われます。

ですので、手軽に横並びのパーツを作りたいという時はインラインブロックがおすすめです。

レイアウトのように大きなパーツを横に並べる時はFlexbox

Flexboxは横並びだけでなく、配置の向きの変更や折り返しなども調整できます。

ですので、ヘッダやフッタ、UIパーツ同士の余白の調整など、レイアウトに関する横並びを実装する際はFlexboxがおすすめです。

Flexboxは万能なので極論『横並び = Flexboxで実装』もアリ

インラインブロックはパンくずリストやページネーションで利用されることが多いですが、Flexboxでも実装可能です。

ですので、『とりあえず横並びはFlexboxで実装する。インラインブロックのほうが楽に実装できるならインラインブロックを利用』のようなスタンスで考えるとよいです。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考記事

• CSS設計完全ガイド ～詳細解説＋実践的モジュール集
• CSSで横並びにする方法3種類とその使い分け
• 【CSS】インラインブロック要素の特徴と使い方をわかりやすく解説
• 【CSS】要素を横に並べる方法、inline-blockとflexboxの違いを比較してみた