Question

这个问题听起来很奇怪，但我想要做的并不需要任何回应。

但我正在使用的设计师使用12列网格系统。

因此易于使用的flexbox可以制作3/2/7网格，如下所示：

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

但它的默认响应。我想使用flexbox来确保我的网络应用程序基于其最大浏览器大小（可能是1920x1080或2880x1800）保持灵活性的一小部分，并且没有响应。是否可以使用flexbox？

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>

如何制作无响应的flexbox？

1 个答案: