最近はgridを使用する方も増えてきましたが、やっぱり便利なflexプロパティ。
そんなflexを横並びにした時に高さが揃わないことってありませんか？
そんな時に確認するべき場所を記載致します。
以前似たような記事も書いてますので、こちらもご参考ください。
align-itemsプロパティ を指定している
まず一つ目はaligin-itemsプロパティを使用している例です。
aligin-itemsは簡単に言うとflexアイテムの配置を指定するプロパティです。
横並びの場合は、上下の位置を指定します。
便利なプロパティですが、「 align-items: stretch;」以外のプロパティを指定すると高さが揃いません。
「 align-items: stretch;」は親要素に合わせて高さが伸縮しますので、すべての子要素の高さが揃います。
よくあるのが、「align-items: center;」プロパティを使用している場合です。
下の図は「align-items: center;」を使用しています。
<div class="wrap">
<a class="btn">flexitem1</a>
<a class="btn">flexitem2<br>flexitem2</a>
<a class="btn">flexitem3<br>flexitem3<br>flexitem3</a>
</div> .wrap {
border: 1px solid #000;
display:flex;
/*align-items: centerを指定している*/
align-items: center;
}
.btn {
background: #000;
color: #fff;
width: 200px;
border: 1px solid #231815;
font-size: 16px;
text-align: center;
cursor: pointer;
}そして、「align-items: center;」を削除したものが下記になります。
align-itemsプロパティの初期値はstretchです。
高さが揃いました！
flex子要素に「height: 100%;」を指定している
もう一つよくあるのがflexアイテムの子要素に「height: 100%;」を使用している例です。
高さを揃えたいんだから「height: 100%;」でどうにかできるだろ！
と思いますが、俺にもそう思っている時期がありました。
.wrap {
border: 1px solid #000;
display:flex;
}
.btn {
/*height: 100%を指定している*/
height: 100%;
background: #000;
color: #fff;
width: 200px;
border: 1px solid #231815;
font-size: 16px;
text-align: center;
cursor: pointer;
}「height: 100%」を指定していると、「align-items: stretch;」を使用していても高さが揃いません。
height: 100%は親要素の高さに応じて、相対的に高さが決まります。
現在親要素である「.wrap」には高さが指定されていないため、「height: 100%」が聞かないんですね。
ということで解決策は３つになります。
「height: 100%」を削除する
そもそも「height: 100%」を削除してしまうということです。
揃えるだけなら必要ないので削除しましょう。
flex親要素に高さを指定する
「height: 100%」の高さが相対的に決まるなら親要素絵ある、「.wrap」に高さを指定すると、子要素である「.btn」で「height」を％で指定できるようになります。
.wrap {
/*親要素に高さを与える*/
height: 300px;
}
.btn {
/*height: 100%で高さを300pxにする*/
height: 100%;
}flex子要素に高さを指定する
子要素に高さをpxやremなどで指定する方法です。
ただ、これだと高さが変わらないならいいですが、カードなど高さが変わりやすいならあまり良い方法ではないですね。
.btn {
/*heightで高さを300pxにする*/
height: 300px;
}まとめ
以上 flex要素の横並びの高さを揃えるでした。
flexは奥が深いですね。
