CSS WEB制作

【flex】高さを揃えないで要素を並べるにはalign-items

flex-align-items

今回は、flexを使うときの便利なテクニック、「align-items」を紹介します。

以前私がハマってしまったのが、高さが異なる要素を並べたとき、自動で高さがそろってしまったことです。

高さはバラバラのままでよかったのですが、flexを使用したら自動的に高い要素に合わされ、全ての要素が同じ高さで並んじゃいました。

 

同じ現象でお困りの方はalign-itemsで解決です。

それでは見ていきましょう。

 

目次
  1. flexの注意点
  2. 解決コード
  3. まとめ

flexの注意点

See the Pen
flex-normal
by t.h (@tomtom15)
on CodePen.

ピンクの要素の方が文章が少ないので、高さとしてはピンクの方が低いんです。

しかし、普通に「display: flex;」を使うと、上のコードのように、ピンク要素が、ブルー要素の高さに合わせられ、同じ高さで並びました。

これはflexのデフォルト設定で、高さがそろうようになっているからです。

やりたいことは、高さがバラバラのまま並べることです。

 

解決コード

See the Pen
flex-start
by t.h (@tomtom15)
on CodePen.

上のコードは高さが異なったまま並べられました。

ポイトンは「align-items: start;」です

これを設定すると、下の画像のように、高さがバラバラのまま、上端をそろえて並べることができます。

 

 

ちなみに、「align-items: end;」とすると、下端がそろいます。

See the Pen
flex-end
by t.h (@tomtom15)
on CodePen.

 

もう一つおまけに。

別の記事でも紹介しましたが、「center」にすると高さが異なったまま中央でそろいます

See the Pen
flex-center
by t.h (@tomtom15)
on CodePen.

line-up
【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法

続きを見る

まとめ

いかがでしたでしょうか。

とっても簡単ですよね。

 

高さがバラバラのまま並べるときは、

  • 上端ぞろい: 「align-items: start;」
  • 下端ぞろい: 「align-items: end;」
  • 中央ぞろい: 「align-items: center;」

です。

ぜひマスターしていろんなレイアウトに対応できるようにしましょう。

 

flexに関連する記事も紹介しておきます。

 

独学で行き詰まっている人はテックアカデミー無料メンター相談もおすすめです。

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5