如何并排排列三个flex div

图西塔·威克拉玛辛格

股利

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

可以在这里找到一个很好的备忘单: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;红色div中。)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章