ここでは複数の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; }