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

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

結果