ホームページ制作 大阪 | 目標を実現するweb制作会社、株式会社トレボ

TREVOのスタッフブログ

Blog
2019.12.03.

CSSで横並びのボックスの高さを揃える方法

コンテンツ内容の異なるボックスを横並びに配置するとボックスの高さ異なるので下辺が揃わずバラバラになります。
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の内容、
ホームページ制作 大阪 | 目標を実現するweb制作会社