divを水平方向に均等配置する コピペで使えるHTML+CSS

スポンサーリンク

ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。

スポンサーリンク

水平方向に均等配置

justify-contentを用いる

div-box-1
div-box-2
div-box-3
div-box-4
スタイルシートで記述
<div class="div-equal-box">
 <div>div-box-1</div>
 <div>div-box-2</div>
 <div>div-box-3</div>
 <div>div-box-4</div>
</div>
.div-equal-box{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin:40px 0px;
}
.div-equal-box div{
  text-align: center;
  width:20%;
  font-size: 12px; 
  border-radius: 2px; 
  border: 1px solid #444444; 
}

displayをflexとして扱います。flex-direction:rowl;として方向を横方向に指定し、justify-contentを用いて、子要素についての横方向配置方法を指定します。space-around指定によってdiv同士の間隔を均等にします。横配置する子要素divはdisplay:inline-blockと指定する必要はありません。

直接、属性に書いたほうが楽かどうか

子要素ついて、スタイルシートで記述していますが、直接htmlで指定したほうが変更しやすくメンテナンスは楽かもしれません。以下のように。

1
2
3
4
5
6
スタイルシートで記述
<div class="div-equal-box">
 <div style="width:10%">1</div>
 <div style="width:10%">2</div>
 <div style="width:10%">3</div>
 <div style="width:10%">4</div>
 <div style="width:10%">5</div>
 <div style="width:10%">6</div>
</div>
.div-equal-box{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin:40px 0px;
}
.div-equal-box div{
  text-align: center;
  font-size: 12px; 
  border-radius: 2px; 
  border: 1px solid #444444; 
}

幅が異なる場合、どのように配置されるか

異なる幅を指定した場合について確認しますと、divの幅と関係なく間隔が均等に取られていることが分かります。

1
2
3
4
5
6
スタイルシートで記述
<div class="div-equal-box">
 <div style="width:10%">1</div>
 <div style="width:20%">2</div>
 <div style="width:5%">3</div>
 <div style="width:10%">4</div>
 <div style="width:30%">5</div>
 <div style="width:6%">6</div>
</div>
.div-equal-box{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin:40px 0px;
}
.div-equal-box div{
  text-align: center;
  font-size: 12px; 
  border-radius: 2px; 
  border: 1px solid #444444; 
}