こんにちは。
ゆうや（@yuyaphotograph）です！
本記事では、Flexboxで要素の高さを合わせない方法を紹介します。
display:flexを指定した時にデフォルトでは子要素の高さは、以下のようにコンテンツ量にかかわらず揃えられてしまいます。
記事一覧ページのようなカードデザインの要素が並ぶ場合にはそれでOKなのですが、デザイン上、高さを不揃いにしたい時には困りますね。
flexを指定した親要素に本記事で紹介するコードを１行追加するだけで、不揃いにできます。
それでは見て参りましょう！
Flexboxで要素の高さをあえて揃えないでみよう！
完成イメージ
実装のポイント
今回の実装のポイントは、
- flexを指定した親要素にalign-items: flex-startを指定する
となります。
コードを見ながら確認していきましょう。
HTML
index.html
<div class="Card">
<div class="Card-Item">テキスト</div>
<div class="Card-Item">テキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>CSS
index.css
.Card{
display: flex;
/* flexアイテムの縦並びの位置を指定 */
align-items: flex-start;
}
.Card-Item{
padding: 16px;
width: 50%;
background: #5bc8ac;
color: #fff;
}
.Card-Item:nth-child(2){
margin-left: 10px;
}align-items: flex-startのサンプルコード
See the Pen
QWbwJea by 石森裕也 (@yuyaphotograph)
on CodePen.
参考記事
目から鱗のTipsでした！本当に助かりました、ありがとうございます！
参考 Flexboxで要素の高さをあえて揃えない方法。align-items:flex-startの使い方AME LOGまとめ
以上、Flexboxで要素の高さを合わせない方法をご紹介しました。
デザイン通りのコーディングをする上で必ず使用する機会が出てくるはずなのでそのときはぜひ使ってみて下さい。
最後までご高覧いただきありがとうございました！
あわせて読みたい
