HTML – 如何并排排列三个flex div

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

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

这里有一个非常好的备忘单：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

另外,不要忘记其他属性,如display：flex;和justify-content：space-between.在上面的链接中完美地解释了它.

但请注意,您不必使用flexbox.您可以使用float实现相同的功能,这使得它与旧版浏览器兼容(为此,只需使用display：block;并将float：left添加到蓝色div并将float：right;添加到红色浏览器.)