CSSで横並びのボックスの高さを揃える方法

投稿日:2019.12.03.
更新日:2025.04.12.

CSS

株式会社TREVOの月額制ホームページ制作サービス
PR

コンテンツ内容の異なるボックスを横並びに配置するとボックスの高さ異なるので下辺が揃わずバラバラになります。
Flexboxを使うことによって高さを揃えることがきます。

Flexboxでの設定

html

<div class="sample">
 <div class="box">
 ボックス1の内容
 </div>
 <div class="box">
 ボックス2の内容、ボックス2の内容、ボックス2の内容
 </div>
 <div class="box">
 ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、
 </div>
</div>

CSS

.sample{
 display:flex;
}
.box{
 width: 20%;
 margin: 1%;
 border:1px solid #ccc;
 background-color: #ddd;
}

結果

ボックス1の内容
ボックス2の内容、ボックス2の内容、ボックス2の内容
ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、ボックス3の内容、

関連の記事

CONTACT

ホームページ制作・Web制作に関するご質問やご相談は、
下記フォームよりお問い合わせください。

無料のお見積りや初回のご相談も承っておりますので、「まだ検討中」「ちょっと話を聞いてみたい」といった段階でも大歓迎です。
現状のホームページ診断も無料で実施中です。

0120-83-8567
平日9:00~18:00まで 定休日:土 日 祝