flex-boxは使う場面が多いと思います。

殆どが高さを揃えることの方が多いと思いますが、揃えたくない時もあります。

そんな時に使うやり方をご紹介します。

通常時

何も指定しない場合はこのように横並びに表示されます。

何もせずに高さが揃うのはとても便利です。

高さを揃えたくない時

それぞれの高さを変えたい時はalign-items: flex-start;を使います。

display: flex;を指定した親要素にalign-items: flex-start;と指定するだけです。

すると・・・

このようにそれぞれの高さで表示されます。