WEBデザインでよく使われるボックスレイアウトですが、横に並べたときにボックスの高さ（下辺）が揃わずに苦労したことってあると思います。
実は「Flexbox」というCSSプロパティを使えば、めちゃくちゃ簡単に解消できちゃうんです。
現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう！
float:leftして、解除して、なんてことはもうしなくていいんです。
Flexboxの使い方
親要素にFlexboxを指定
ボックスレイアウト全体を囲んでいる親要素にdisplay: flexboxを指定するだけです。
ただそれだけ。すごい。
- HTML
<div class=”wrap”> <!– 親要素 –>
<div class=”box”> <!– ボックス1 –>
ボックス１の内容
</div>
<div class=”box”> <!– ボックス2 –>
ボックス２の内容
</div>
<div class=”box”> <!– ボックス3 –>
ボックス３の内容
</div>
</div>
- CSS
.wrap{
display:flex;
}
.box{
width: 31%;
margin: 1%;
}
参考サイト
コメントを残す