CSSで横並びのボックスの高さを揃える方法
投稿日:2019.12.03.
更新日:2025.04.12.
コンテンツ内容の異なるボックスを横並びに配置するとボックスの高さ異なるので下辺が揃わずバラバラになります。
Flexboxを使うことによって高さを揃えることがきます。
Flexboxでの設定
html
<div class="sample">
<div class="box">
ボックス1の内容
</div>
<div class="box">
ボックス2の内容、ボックス2の内容、ボックス2の内容
</div>
<div class="box">
ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、
</div>
</div>
CSS
.sample{
display:flex;
}
.box{
width: 20%;
margin: 1%;
border:1px solid #ccc;
background-color: #ddd;
}
結果
ボックス1の内容
ボックス2の内容、ボックス2の内容、ボックス2の内容
ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、