要素を左右に並べる場合、以前はfloatなどを使ってましたね。
ですが、float を使うとclear しないといけなかったりレイアウトが崩れやすかったり使いづらいですよね。
現在はほとんどの方がflexを使って並べてるのではないでしょうか？

今回はそんなflex要素の高さを揃える方法を考えたいと思います。

高さが揃わない原因をこちらでもまとめてますのでご参考ください。

flex要素を横並びにしても高さが揃わない！を解決する
目次 [ close ]
  1. 簡単なレイアウトの高さを揃える
  2. よくある間違い
  3. まとめ

簡単なレイアウトの高さを揃える

要素１ 要素２の中身要素２の中身要素２の中身 要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身

上の要素3つは高さがガタガタで見栄えが悪いですが、flexを使うと簡単に高さを揃えられます。

<div class="btn_wrap">
　<a class="btn">要素１</a>
　<a class="btn">要素２の中身要素２の中身要素２の中身</a>
　<a class="btn">要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身</a>
<div>

<style>
.btn_wrap {
      display: flex;
　　　border: 1px solid #000;
}
.btn {
      display:inline-block;
      background: #000;
      color: #fff;
      width: 200px;
      border: 1px solid #231815;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
}
要素１ 要素２の中身要素２の中身要素２の中身 要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身

display:flexを指定するだけで、高さが揃いました。
 align-itemsの初期値はstretchです。
stretchは、横軸なら高さが、縦軸なら横幅が自動で伸縮されます。

私が昔よくやっていた間違いは、なんでもかんでもalign-items;centerを指定して、高さが揃わないと困っていました。
下記はalign-items;center;指定した例です。
flexの子要素に　高さ100% を指定していますが、伸縮していません。
この用にflexアイテムの高さを揃えるには height:100% を指定するのではなく、align-items;center;　で高さを揃えます。

よくある間違い

要素１ 要素２の中身要素２の中身要素２の中身 要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身 
<div class="btn_wrap">
　<a class="btn">要素１</a>
　<a class="btn">要素２の中身要素２の中身要素２の中身</a>
　<a class="btn">要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身</a>
<div>

<style>
.btn_wrap {
     display: flex;
     align-items;center;
　　 border: 1px solid #000;
}
.btn {
      display:inline-block;
      background: #000;
      color: #fff;
      width: 200px;
      border: 1px solid #231815;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      height: 100%;
}

まとめ

flexboxの高さを揃えるには flexのみ指定すればよいことが、分かりました。
高さを揃えたら、後は子要素のflexbox にも

display:flex、
align-items: center;
justify-content: center;

を指定してあげれば子要素を揃えて真ん中にきれいに配置できます。

要素１ 要素２の中身要素２の中身要素２の中身 要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身 
<div class="btn_wrap">
　<a class="btn">要素１</a>
　<a class="btn">要素２の中身要素２の中身要素２の中身</a>
　<a class="btn">要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身</a>
<div>

<style>
.btn_wrap {
     display: flex;
　　 border: 1px solid #000;
}
.btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
      color: #fff;
      width: 200px;
      border: 1px solid #231815;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      height: 100%;
}

以上 flexアイテムの高さを揃えるでした。
次回はさらに、発展してカード型のアイテムの高さを揃えることを考えたいと思います。