システム 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

【CV達成27％⤴ 】月間80万人に読まれるオウンドメディア「データのじかん」サイト改善の裏側

2025.04.22 プロジェクト

アジャイル型Web改善で「失敗しないリニューアル」スピード感とコスト効率の両立を図る。

ディレクション

応募ページ到達が+2.1倍⤴「ブランドサイト」と「採用サイト」は分けるべき？費用対効果をデータで比較してみた。

2025.04.10 プロジェクト

人気のトピックス🚀

分散型インターネットポッドキャストテクノロジーと社会 AIと倫理プロジェクト

KOHIMOTO

ご相談・ご質問など、お気軽にお問い合わせください。

CONTACT

テクノロジー

カルチャー

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

やり方

Related article

Pick Up