flexboxでリキッドレイアウト（固定 + 可変）にする方法
・リキッドレイアウトとは可変カラムと固定カラムのこと。
ブラウザのサイズやデバイスの違いを柔軟に表示する概念
例) 「サイドメニューが、固定幅で、メインコンテンツが可変幅」など。
・flexboxのリキッドレイアウトが使えるケース
・レスポンシブデザインに最適
・固定、可変する要素があるとき
・フォームのラベルと入力要素が並ぶ時
cssfile
.wrapper {
display: flex;
}
.side {
width: 300px;
}
.main {
flex: 1;
}
htmlfile
wrapper
side
main
１,
CSSでは、梱包要素のwrapperクラスに、display: flex; を適用することで
フレックスコンテナボックスにすることが目的。これで子要素は横並びになる
2,
sideクラスに width: 300px;の横幅を与えて固定値とする
3,
mainクラスにflex: 1;の指定で可変を実現する。
flexプロパティはflexのスタイルカスタマイズする省略プロパティ。
CSSショートハンドという。リキッドレイアウトを実現するに当たって厳密にプロパティを指定する必要性がない。
まとめ
・必要なHTML：梱包要素、固定カラム、可変カラム。
・必要なCSS：梱包要素 display: flex; 固定カラム width: ~~px; 可変カラム flex: