【仕事メモ】レスポンシブ横並び（html＆CSS）

wordpressのテンプレートを使った、簡単なサイト作りを低価格で提供しています。

画像の横並びにはいろいろと悩むことも多く…

まして最近はスマホのほうが絶対大事！！！

そんな時に、このhtmlとCSSがあればレスポンシブにも対応していて理想的ならびに。

一番よく使う、PCは４つ並び・スマホは２つ並び。

良く使うのでメモ。

HTML

<div class=”col_4″>
<div>内容①</div>
<div>内容②</div>
<div>内容③</div>
<div>内容④</div>
</div>

CSS

*, *:before, *:after {
box-sizing: border-box;
}
.col_4{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
width: 25%;
padding: 10px;
}
@media screen and (max-width: 960px) {
.col_4 > div{
width: 33.33333%;
}
}
@media screen and (max-width: 480px) {
.col_4 > div{
width: 50%;
}
}