Flexboxで要素の高さを合わせない方法

Flexboxで要素の高さを合わせない方法

こんにちは。

ゆうや(@yuyaphotograph)です!

本記事では、Flexboxで要素の高さを合わせない方法を紹介します。

display:flexを指定した時にデフォルトでは子要素の高さは、以下のようにコンテンツ量にかかわらず揃えられてしまいます。

Flexboxはデフォルトで要素の高さが揃う

記事一覧ページのようなカードデザインの要素が並ぶ場合にはそれでOKなのですが、デザイン上、高さを不揃いにしたい時には困りますね。

flexを指定した親要素に本記事で紹介するコードを1行追加するだけで、不揃いにできます。

それでは見て参りましょう!

Flexboxで要素の高さをあえて揃えないでみよう!

完成イメージ

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で要素の高さを合わせない方法をご紹介しました。

デザイン通りのコーディングをする上で必ず使用する機会が出てくるはずなのでそのときはぜひ使ってみて下さい。

最後までご高覧いただきありがとうございました!

あわせて読みたい

CSSで縁取り文字を作る方法

【CSS】flexboxで横スクロールを実装する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です