html - 为什么当浏览器窗口重新调整大小时 div 宽度没有改变？

Question

我有一个名为 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;
}

我需要对分隔线的边距做些什么，还是有任何其他方法可以使分隔线完全灵活(宽度方面)。

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