システム Edit : 2020.12.23 Update : 2024.11.07

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

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

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

Contents

やり方

やり方

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

<div class="wrap">
  <div class="inner blue"></div>
  <div class="inner red"></div>
  <div class="inner black"></div>
  <div class="inner green"></div>
</div>

</div>

▪css

.wrap {
  display: flex;
  flex-wrap: wrap;
}
.wrap .inner {
  float: left;
  width: 41.368%;
  margin-right: 8.632%;
}

.wrap {

display: flex;

flex-wrap: wrap;

}

.wrap .inner {

float: left;

width: 41.368%;

margin-right: 8.632%;

}

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

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

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。

INDEX

PICK UP

【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。

2024.06.09 プロジェクト

Webサイトの保守メンテナンス・運用を使って、改善のプロセス化を図る

2023.05.15 プロジェクト

子供向けWebアプリケーション、UI・UXデザイン制作6つのポイント

2022.10.05 ユーザビリティ

KOHIMOTO

Category

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

やり方

Related article

Pick Up