高さが異なるdivやbox要素が並んでいる場合に、一番高い要素に揃えて並べる

,

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

これを簡単に解決してくれるのが、display: flexです。

やり方

横並びの要素全体を囲っているdivに対して、display: flexとflex-wrap: wrapを設定します。

例）
▪HTML

1
2
3
4
5
6
<div class="wrap">
  <div class="inner blue"></div>
  <div class="inner red"></div>
  <div class="inner black"></div>
  <div class="inner green"></div>
</div>

 
▪css

1
2
3
4
5
6
7
8
9
.wrap {
  display: flex;
  flex-wrap: wrap;
}
.wrap .inner {
  float: left;
  width: 41.368%;
  margin-right: 8.632%;
}

上記の場合、.innerが横並びのboxで、.wrapがそのすべてを囲む要素なので、そこに対して指定します。すると、要素の高さが正確に揃っていなくても、横並びの中でいちばん高さのある要素に合わせて綺麗に並ぶようになります。
 

私は結構使うcssなので、メモ📝