如何并排安排三个柔性div

Question

我在内容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;

但没有正常工作.这该怎么做？

Answer 1

使用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;红色的.)

Answer 2

您可以使用flex速记属性,该属性定义项的灵活行为:

.yellow { display: flex } /* Magic begins */
.red, .green, .blue { min-width: 0 } /* See http://stackoverflow.com/q/26895349/ */
.red { flex: 0 200px } /* Initial width of 200, won't grow, can shrink if necessary */
.green { flex: 400px } /* Initial width of 400, grows to fill available space, can shrink if necessary */
.blue { flex: 0 400px } /* Initial width of 400, won't grow, can shrink if necessary */

html, body {
  height: 100%;
  margin: 0;
}
.yellow {
  display: flex;
  height: 100%;
}
.red, .green, .blue {
  min-width: 0;
}
.red {
  flex: 0 200px;
  background-color: red;
}
.green {
  flex: 400px;
  background-color:green;
}
.blue {
  flex: 0 400px;
  background-color: blue;
}

<div class="yellow">
  <div class="blue"></div>
  <div class="green"></div>
  <div class="red"></div>
</div>