为什么在重新调整浏览器窗口大小时div宽度不变

Question

我有一个名为主体容器的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;
}

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

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

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