■横並びのdivの高さ揃える■
今まではJavaScriptを駆使して横並び要素の高さを揃えていましたが、
先日「これからのCSSレイアウトはFlexboxで決まり！」で紹介したように、
Flexboxを使えばCSSだけで実装できます。横並びにした div を包む要素に
display: flex; を追加するだけ。Safari用にベンダープレフィックスも必要です。
▲ＨＴＭＬ▲
<div class=”main”>
<section class=”col-1″>
<h1>Column 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum.
</p>
</section>
<section class=”col-2″>
<h1>Column 2</h1>
<p>
Morbi non semper sapien. Suspendisse elementum interdum metus, in volutpat lectus consectetur id. Praesent vulputate ipsum eget lectus tempus tempus. Nullam ut lobortis risus, eu tempor tellus.
</p>
<p>
Integer vel pellentesque elit. Sed faucibus magna vitae metus ornare, ut pulvinar leo blandit. Mauris tincidunt ante nec quam maximus iaculis ut id lorem. Integer nec ligula faucibus, sollicitudin elit at, maximus tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum.
</p>
<p>
Praesent vulputate ipsum eget lectus tempus tempus. Nullam ut lobortis risus, eu tempor tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</section>
<section class=”col-3″>
<h1>Column 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum.
</p>
<p>
Integer commodo, risus vel viverra bibendum, massa massa consectetur felis, condimentum laoreet mi turpis quis turpis. Aenean sed sodales augue.
</p>
</section>
</div>
▲ＣＳＳ▲
.main {
display: -webkit-flex;
display: flex;
}
.main section {
margin: 10px;
border-radius: 5px;
background: #F5F0CF;
padding: 15px;
}
.main h1 {
color: #E6AC27;
font-size: 1.5rem;
}
.main p {
margin-top: 10px;
}