🦍

float: leftよりも簡単に横並びを実現する方法

2024/04/04に公開

やり方だけサクッと知りたい方は「やり方」から，より理解を深めたい方は「この記事の位置付け」からどうぞ〜

この記事の位置付け

下記の記事では，floatを使って横並びにならない人への解決策を簡潔に書きました。

具体的には，親要素ではなく，子要素にfloatを指定してあげようね，と言う内容でした。

ただ，子要素のclassを複数パターン使いたい場合もあるかと思います。

こちらの記事では，親要素のCSSを書き換える形で，横並びを実現する方法について書いていきます。

ちなみに，以下記事ではfloatを指定した際に背景がズレる・消える問題について書いているのですが，この記事は，そちらについてのより簡単な解決策にもなってます。

ズバリ，以下のようなhtmlについて，a, b, cを横並びにしたいときには，

<div class="parent">
  <div class="child">a</div>
  <div class="child">b</div>
  <div class="child">c</div>
</div>

以下のようなCSSを書くといけます。

.parent {
  display: flex;
}

ちなみに，背景については，そのまま以下のように指定するといけます。

.parent {
  display: flex;
  background-color: red;
}