11/10 ソース等一部修正
See the Pen GNpoGr by nakanishi (@nakanishi) on CodePen.
.flexbox { display: flex; flex-wrap: wrap; } .box { width: 33.33%; width: calc(100% / 3); border: solid 1px; box-sizing: border-box; } img { width: 100%; }
<div class="flexbox"> <div class="box"><img src=""></div> <div class="box"><img src=""></div> <div class="box"><img src=""></div> </div>
display: flex + flex-wrap: wrap
まずdisplay: flexにボックスの配置モデルを変更する。さらにflexの詳細設定としてflex-wrap: wrapを指定する。こうすることで、ボックスは左から右に配置されていき、親要素幅を超えた場合に、ラップする。
Boxの幅を三分割に指定する
さらに、box一個分の幅を33.3%にすることで三分割される。すると4個目が下に折り返される。より正確にはcalc(100% / 3)するほうが良い。
Box内の画像を親要素のBOXにあわせて伸縮させる
最後に、中に配置した画像は必ず正方形にし、幅を100%と指定することで、親要素であるboxと同じ幅に画像を伸縮させる。