divやi㎎などをfloatやdisplay-inline-blockなどで横並びにしているとき、それぞれの高さが揃っていないと、うまく要素が回り込まず、レイアウト崩れしてしまうことがあります。   これを簡単に解決してくれるのが、display: flexです。

やり方

横並びの要素全体を囲っているdivに対して、display: flexとflex-wrap: wrapを設定します。 例） ▪HTML   ▪css 上記の場合、.innerが横並びのboxで、.wrapがそのすべてを囲む要素なので、そこに対して指定します。すると、要素の高さが正確に揃っていなくても、横並びの中でいちばん高さのある要素に合わせて綺麗に並ぶようになります。   私は結構使うcssなので、メモ📝