为什么 div 宽度在浏览器 window 调整大小时没有改变？

Question

我有一个 div 名为 body-container .

我想根据浏览器 window 大小更改 div 的宽度。我正在使用 flexbox 模型来做，但是宽度不会根据浏览器的大小而改变 window.

我的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;
}

我需要对 divider 的边距做些什么吗？或者是否有任何其他方法可以使 divider 完全灵活（宽度方向）。

Answer 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;
}

Answer 2

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

为什么 div 宽度在浏览器 window 调整大小时没有改变？

Why is div width not changing when browser window re-sizes?

html

css

flexbox

responsive-design