flex-wrap: wrap

ほんっとにはじめてのHTML5とCSS3
【18-2】Flexbox内のボックスの配置方法を指定しよう　サンプル1

1

flex-wrap:wrap を指定すると、ウィンドウ幅が狭くなるに連れて、flex-basis:100px で指定したサイズより小さくなれば順次 wrap（改行）します。

2

3

flex-grow:1 に従って各行のアイテムの幅が揃います。

4

高さはコンテンツのボリュームによって変わります。

5

6

HTML

<body>
<header>略</header>

<div id="container">
  <section>
    <h1>1</h1>
    <p>略</p>
  </section>

 （以下、<section>要素を繰り返し配置）

</div>

<footer>略</footer>
</body>

CSS

div#container {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between}
div#container section {flex:1 0 100px}