応答しないflexboxを作成するには？

Question

この質問は奇妙に聞こえるが、私が作ろうとしていることは応答性を必要としない。

私がやっているデザイナーは、12列グリッドシステムを使用しています。

このように、3/2/7グリッドを作るためにフレキシボックスを使用するので、その簡単：

container: display:flex a flex:3 b flex:2 c flex:7

しかし、デフォルトではその応答。 フレックスボックスを使用して、最大のブラウザサイズ（おそらく1920x1080または2880x1800）に基づいて、自分のウェブアプリケーションがフレックスの一部分に留まっていることを確認したいと思います。 フレックスボックスで可能ですか？

Answer 1

スクリーンの解像度を知っているCSSユニットはありません。そのため、これを修正する小さなスクリプトが必要です。ここでは、ページの読み込み時に本体の画面幅を設定するだけです。これは通常の悪いユーザー体験をもたらしますし、可能であれば避けるべきで既に言われているよう

、

window.addEventListener('load', function(){ 
 
    document.body.style.cssText = 'width: ' + window.screen.availWidth + 'px'; 
 

 
    /* for this demo only */ 
 
    console.log('This body takes full screen width and is', window.screen.availWidth + 'px wide'); 
 
})

.flex { 
 
    display: flex; 
 
} 
 
.flex > div { 
 
    background: lightgray; 
 
    padding: 10px; 
 
    margin: 10px 0; 
 
} 
 
.flex > div ~ div { 
 
    margin-left: 10px; 
 
} 
 
.a { 
 
    flex: 3; 
 
} 
 
.b { 
 
    flex: 2; 
 
} 
 
.c { 
 
    flex: 7; 
 
}

<div class="flex"> 
 
    <div class="a"> A </div> 
 
    <div class="b"> B </div> 
 
    <div class="c"> C </div> 
 
</div>