生活情報オンライン

ITエンジニアが役立つ情報を発信します。

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

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


まずは完成図です。


1.横幅が足りるときはこのとおり。
f:id:somegoro:20160627064208p:plain
子2は固定幅で 300px とします。


2.そして横幅が足りなくなると、複数行で表示されます。縦に表示するってことですね。
f:id:somegoro:20160627085258p:plain
このとき、子1の最小幅は 300px とします。


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


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

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


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

flex: 1
min-width : 300px;


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

width : 300px;


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

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

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



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


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