如何使无响应的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？

回答

相关问题