flexbox でレスポンシブデザインを作る方法（その２）横幅が足りなくなったら複数行にする

今回は「flexboxプロパティ」を使用して、横幅が足りなくなったら複数行にするデザインを作っていきます。

まずは完成図です。

１．横幅が足りるときはこのとおり。

子２は固定幅で 300px とします。

２．そして横幅が足りなくなると、複数行で表示されます。縦に表示するってことですね。

このとき、子１の最小幅は 300px とします。

それでは実際の設定の仕方を見ていきましょう。

親要素に指定するスタイルシート

display: flex;
display: -webkit-flex;/* safari用 */
flex-wrap: wrap;
-webkit-flex-wrap: wrap;/* safari用 */

子１要素に指定するスタイルシート

flex: 1
min-width : 300px;

子２要素に指定するスタイルシート

width : 300px;

これだけです。簡単に横幅可変長かつ、横幅が足りなくなったら複数行にすることが出来ましたね。

CSS3デザインブック 仕事で絶対に使うプロのテクニック

この記事からの応用でした。
somegoro.hatenablog.com

（追記）この記事がかなり参考になりました。
floatより辛くない「flexbox」でざっくりレイアウト - Qiita