プログラミング

【CSS】flex で横並びにすると要素の高さがそろってしまう 高さがバラバラのまま並べたい を解決

スポンサーリンク

height

プログラミングを勉強中のみなさん、こんにちは!

今回は、flexを使う際に注意点を一つ紹介します。
初心者向けのメモ書きとして執筆しておりますので、あしからず。

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

flexの注意点

サイト模写で、「display: flex;」を使い、高さが違う二つの要素を横に並べました。

それぞれの要素にはボーダーを設定しておりました。
すると下の画像のようになりました。

要素ズレ

右側の要素のボーダーが、左の要素の高さに合うようになってしまいました。

要するに、複数の要素の高さが自動的にそろってしまっています。
これはflexのデフォルト設定で、高さがそろうようになっているからです。

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

解決コード

「align-items: flex-start;」を追記しましょう。

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

高さバラバラ

 

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

まとめ

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

とっても簡単ですよね。

高さがバラバラのまま並べるときは、「align-items: flex-start;」です。

年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

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

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5