display: flex,flex-wrap: wrapを使って正方形の画像をレスポンシブで配置する

Tweet

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と同じ幅に画像を伸縮させる。