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

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

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

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

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

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

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.

まとめ

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

とっても簡単ですよね。

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

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

です。

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

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

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