Html 如何并排排列三个弹性分区

在调整浏览器大小时，我在content div中有三个div

• 蓝色和红色div必须具有固定的宽度
• 绿色div必须调整为左空格

我也在css中尝试过这个

.yellow{
    height: 100%;
    width: 100%;
}
.red{
    height: 100%;
    width:200px;
    display:inline-block;
    background-color: red;
}
.green{
    height: 100%;
    min-width:400px;
    display:inline-block;
    background-color:green;
}
.blue{
    height: 100%;
    width:400px;
    display:inline-block;
    background-color: blue;
}

此代码不调整绿色div的大小，在某些浏览器中红色面板不显示

我还尝试了

float:left

和

    display: -webkit-flex;
    display: flex;

---

但是工作不正常。如何做到这一点？

使用

flex-grow

。对于蓝色和红色容器，将其设置为0，对于绿色容器，将其设置为大的值：

.red{
    height: 100%;
    width:200px;
    flex-grow: 0;
    display:inline-block;
    background-color: red;
}
.green{
    height: 100%;
    min-width:400px;
    flex-grow: 1000;
    display:inline-block;
    background-color:green;
}
.blue{
    height: 100%;
    width:400px;
    flex-grow: 0;
    display:inline-block;
    background-color: blue;
}

在这里可以找到一份非常好的备忘单：

另外，不要忘记其他属性，如

display:flex和
对正内容：之间的空格
。上面的链接对此进行了完美的解释

但是，请注意，您不必使用flexbox。您可以使用
float
实现同样的效果，这使得它与较旧的浏览器兼容（要做到这一点，只需使用
display:block；
并将
float:left
添加到蓝色div中，将
float:right；
添加到红色div中即可）。
您可以使用
flex
速记属性，它定义了项目的灵活行为：

.yellow{display:flex}/*魔术开始了*/
.red、.green、.blue{最小宽度：0}/*请参见http://stackoverflow.com/q/26895349/ */
.red{flex:0 200px}/*初始宽度为200，不会增长，必要时可以收缩*/
.green{flex:400px}/*初始宽度为400，增大以填充可用空间，必要时可以缩小*/
.blue{flex:0 400px}/*初始宽度为400，不会增长，必要时可以收缩*/


html，正文{
身高：100%；
保证金：0；
}
黄先生{
显示器：flex；
身高：100%；
}
.红色、.绿色、.蓝色{
最小宽度：0；
}
瑞德先生{
flex:00200px；
背景色：红色；
}
格林先生{
flex:400px；
背景颜色：绿色；
}
蓝先生{
flex:0400px；
背景颜色：蓝色；
}

这可能会有帮助：不同的浏览器支持flex速记属性吗？@Thusitha所有支持flexbox的浏览器都应该支持
flex
。这是一个非常好的链接。内容解释得很好。