技術ブログ
コンテンツ内容の異なるボックスを横並びに配置するとボックスの高さ異なるので下辺が揃わずバラバラになります。
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の内容、
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。