CSSのdisplay:flexとalign-items:stretchを使って複数ボックスエリアの高さを全て揃えて表示する方法

CSSのdisplay:flexとalign-items:stretchを使って複数ボックスエリアの高さを全て揃えて表示する方法をご紹介します。

display:flexとalign-items:stretchを使って複数ボックスエリアの高さを全て揃えて表示するCSSの記述

※複数ボックスエリア全体を囲うエリア（.flxbox）にdisplay:flexとalign-items:stretch（一番高いエリアに合わせる）と複数ボックスエリア（.flxitem）のCSS記述です。

<style>
body{
  padding: 0;
  margin: 0;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:bold;
  padding: 15px 0 30px 0;
  font-size: 18px;
}
.flxbox {
    background-color: #333333;
    width: 800px;
    margin: 20px auto;
    display: flex;
    align-items: stretch;
}
.flxitem {
    padding: 8px;
    margin:  1%;
    width: 18%;
}
.flxitem:nth-child(1) {
    background-color:  #cccccc;
}
.flxitem:nth-child(2) {
    background-color:  #ffffff;
}
.flxitem:nth-child(3) {
    background-color: #cccccc;
}
.flxitem:nth-child(4) {
    background-color:  #ffffff;
}
.flxitem:nth-child(5) {
    background-color:  #cccccc;
}
</style>

複数ボックスエリアの高さを全て揃えて表示するHTMLの記述

※全体を囲うエリア（class=”flxbox”）と5つのボックスエリア（class=”flxitem”）を用意します。必要に応じて変更して下さい。

<h1>CSSのdisplay:flexとalign-items:stretchを使って複数ボックスエリアの高さを全て揃えて表示</h1>

<div class="flxbox">
    <div class="flxitem">
        テキスト1テキスト1
    </div>
    <div class="flxitem">
        テキスト2テキスト2テキストテキスト2テキストテキスト2テキストテキスト2テキストテキスト2テキストテキスト2
    </div>
    <div class="flxitem">
        テキスト3テキスト3テキストテキスト3テキストテキスト3テキストテキスト3テキストテキスト3テキストテキスト3テキストテキスト3テキストテキスト3
    </div>
    <div class="flxitem">
        テキスト4テキスト4テキストテキスト4テキストテキスト4
    </div>
    <div class="flxitem">
        テキスト5
    </div>
</div>

CSSのdisplay:flexとalign-items:stretchを使って複数ボックスエリアの高さを全て揃えて表示するデモページ

CSSのdisplay:flexとalign-items:stretchを使って複数ボックスエリアの高さを全て揃えて表示するデモページ

　
過去記事「jquery.matchHeight.jsを使って横並びの不揃いな要素の高さを揃える方法」の様に昔はJavaScriptを使って高さを揃えてたことがありますがdisplay:flexとalign-items:stretchを使えばCSSだけで出来ますね。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。