HTML&CSS

flex要素の高さを揃える方法

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

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

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

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

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

上の要素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;
}
</style>
要素１ 要素２の中身要素２の中身要素２の中身 要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身

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

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%;
}
</style>

よくある間違い

私が昔よくやっていた間違いは、なんでもかんでも「align-items;center」を指定していたことです。

下記は「align-items;center」指定した例です。
flexの子要素に　高さ100% を指定していますが、伸縮していません。
この用に「align-items;center」を指定していると、「height: 100%;」を指定していても高さが揃いません。

要素１ 要素２の中身要素２の中身要素２の中身 要素３の中身要素３の中身要素３の中身要素３の中身要素３の中身 
<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%;
}
</style>

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

-HTML&CSS
-,