为什么浏览器窗口重新调整大小时 div 宽度没有变化？答案

【问题标题】：Why is div width not changing when browser window re-sizes?为什么浏览器窗口重新调整大小时 div 宽度没有变化？
【发布时间】：2016-02-05 08:36:50
【问题描述】：

我有一个名为 body-container 的 div。

我想根据浏览器窗口大小更改 div 的宽度。我正在使用 flexbox 模型来执行此操作，但宽度不会根据浏览器窗口的大小而变化。

我的 CSS：

.body-container
{
    display:flex;
    display:-webkit-flex;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    box-shadow:2px 2px 2px #A8A8A8;
    width:800px;
    height:250px;
}

我需要对分隔线的边距做些什么吗，或者有没有其他方法可以使分隔线完全灵活（宽度方向）。

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

不要使用使用固定值（像素）的width: 800px，而是使用相对值，例如百分比。试试这个：

.body-container  {
    display:flex;
    display:-webkit-flex;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    box-shadow:2px 2px 2px #A8A8A8;
    width: 75%; /* ADJUSTED */
    height:250px;
}

【讨论】：

非常感谢......这就像魅力一样。我还将边距值更改为 % 并且它现在正在工作。 :)
对width、margin 和其他属性使用百分比非常简单明了。当您对height 使用百分比时，它会变得有点棘手。以下是您需要了解的内容：stackoverflow.com/a/31728799/3597276

【解决方案2】：

当我们需要一个响应式容器时，必须以 百分比(%) 指定宽度。还要确保您照顾该容器中的元素。有正确的断点并相应地以百分比表示宽度。

【讨论】：