如何使無響應的Flexbox？

-1

這個問題聽起來很奇怪，但我試圖做的並不需要任何響應。如何使無響應的Flexbox？

但是我正在使用的設計師使用12列網格系統。

所以其易於使用Flexbox將做出3/2/7格，像這樣：

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

但默認情況下它的響應。我想要使用flexbox來確保我的web-app基於其最大瀏覽器大小（可能是1920x1080或2880x1800）停留在flex的幾分之一內，並且沒有響應。 Flexbox可以嗎？

來源

2017-04-17 Duck Yeon Kim

是否設置在容器幫助'分鐘，width'？ – Richard

@理查德哦，我想它是我正在尋找的！謝謝 –

@Richard任何想法如何根據用戶的決議使其最小寬度100％？ –

沒有知道屏幕分辨率的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>

來源

2017-04-17 10:09:52 LGSon

如何使無響應的Flexbox？

回答

相關問題