CSSで横並びのボックスの高さを揃える方法 ホームページ制作 大阪の株式会社TREVO｜SEO対策・システム作成

コンテンツ内容の異なるボックスを横並びに配置するとボックスの高さ異なるので下辺が揃わずバラバラになります。
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;
}

結果