【HTML・CSS】複数のボタンや画像を同じ間隔（等間隔）で横並びに配置する方法

この記事ではボタンや画像を複数並べたときに、同じ間隔（等間隔）を空けて配置する方法を紹介します。

等間隔で横並びにボタンを並べる(flexbox)

複数の要素を等間隔で並べるには、CSSの display:flex と justify-content: space-evenly を使用します。

複数のボタンを等間隔で配置した例を次に示します。

See the Pen
複数のボタンや画像を同じ感覚で横並びに配置する by aiiro (@aiiro29)
on CodePen.

この例では、同じ間隔で配置されていることをわかりやすくするために、widthを400ピクセルに、背景色を水色にしたdiv要素をcontentというクラス名で用意しています。

次に、並べたいボタンをinnerというクラス名のdiv要素で囲みます。
このクラス名がinnerのdiv要素に対して display:flex と justify-content: space-evenly を設定することで、複数のボタンを同じ間隔を空けた状態で配置しています。

説明に使用したHTML

<div class="content">
  <div class="inner">
    <button>ボタン1</button>
    <button>ボタン2</button>
    <button>ボタン3</button>
  </div>
</div>

説明に使用したCSS

.content {
  width: 400px;
  height: 100px;
  background-color: #00ffff;
}

.inner {
  padding-top: 30px;
  display: flex;
  justify-content: space-evenly;
}