生活情報オンライン

ソフトウェアエンジニアが役立つ情報を発信します。

flexbox でレスポンシブデザインを作る方法(その1)横幅を伸ばす

レスポンシブデザインを作るにあたって、flexbox は非常に有用です。今回はその「flexboxプロパティ」を使用して横幅が可変なデザインを作っていきます。


まずは完成図です。
f:id:somegoro:20160627064208p:plain
指定した要素を伸ばすことで可変長のデザインを実現しています。このようにすれば、ちまちまとピクセル指定しなくても横幅ピッタリのデザインが作成できますね。


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


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

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


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

flex: 1


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

width : 300px;


これだけです。簡単に可変長に設定することが出来ましたね。

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

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