画像とテキストを横並びにして、なおかつ上下中央揃えにしたい時、どうやってコーディングしていますか？
Flexboxを使ってレイアウトする方が多いのではないでしょうか。
とても便利で、中央寄せも簡単にできるのですが、思わぬ落とし穴があります。
こんな風に、高さがそろわないレイアウトになってしまったこと、ありませんか…？
「Flexboxじゃこのレイアウトできないのか」って諦めないでください。
ちゃんと高さをそろえる方法はあります。
まずは普通に組んでみる
HTML
<div class="example">
<figure><img src="" alt="画像"></figure>
<div class="txt">
<h1>タイトル</h1>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>CSS
.example {
display: flex;
align-items: center;
}
.example .txt {
background-color: #fff;
padding: 30px;
}ブラウザによってベンダープレフィックスが必要になります。
2019年最新のベンダープレフィックスは下記記事をご覧ください。
結果
この組み方だと下図のように、高さがそろわなくなります。
解決策
HTML
<div class="example">
<figure><img src="" alt="画像"></figure>
<div class="txt">
<div>
<h1>タイトル</h1>
<p>テキストテキストテキストテキストテキスト</p>
</div>
</div>
</div>- <h1>タグと<p>タグをさらに<div>タグで囲う
CSS
.example {
display: flex;
}
.example .txt {
background-color: #fff;
padding: 30px;
display: flex;
align-items: center;
}- .example に指定していた「align-items: center;」を外す
- .example .txt に「display:flex;」と「align-items: center;」を追加
結果
これで理想のレイアウトになります！
きちんと高さがそろっていますね！
「align-items: center;」は親要素ではなく子要素に指定するのが正解でした。
ただ、親要素の「display: flex;」を外すと崩れてしまうので、どちらにも指定することがポイントです。
あえて要素同士の高さを揃えたくない場合は、以下を参考にしてください。
まとめ
Flexboxはとても便利ですが、扱いが難しく、このように意図しない現象に遭遇してしまうこともあります。
こんな意外な解決方法があるので、悩んでいた方、是非ご覧ください。
