flexbox でレスポンシブデザインを作る方法(その1)横幅を伸ばす
レスポンシブデザインを作るにあたって、flexbox は非常に有用です。今回はその「flexboxプロパティ」を使用して横幅が可変なデザインを作っていきます。
まずは完成図です。
指定した要素を伸ばすことで可変長のデザインを実現しています。このようにすれば、ちまちまとピクセル指定しなくても横幅ピッタリのデザインが作成できますね。
それでは実際の設定の仕方を見ていきましょう。
親要素に指定するスタイルシート
display: flex;
display: -webkit-flex;/* safari用 */
子1要素に指定するスタイルシート
flex: 1
子2要素に指定するスタイルシート
width : 300px;
これだけです。簡単に可変長に設定することが出来ましたね。
- 作者: MdN編集部
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2012/03/21
- メディア: 単行本
- クリック: 14回
- この商品を含むブログを見る