如何排列三个flex div并排 [英] How to arrange three flex div side by side

问题描述

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

• 蓝色和红色div必须有固定宽度


• 绿色div必须调整大小以留出空间

我也在css中试过这个

  .yellow {
 height：100％; 
宽度：100％; 
} 
 .red {
 height：100％; 
 width：200px; 
 display：inline-block; 
背景颜色：红色; 
} 
 .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，绿色容器设置为0：

  .red {
身高：100％; 
 width：200px; 
 flex-grow：0; 
 display：inline-block; 
背景颜色：红色; 
} 
 .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。） p>

I have three divs in content div, When browser resizing

• blue and red div must have their fixed width
• green div must resize to left space

I also tried this in 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;
}

This code does not resize green div, In some browsers red panel not showing

I also tried float: left and

    display: -webkit-flex;
    display: flex;

but not working correctly. How to do this?

解决方案

Use flex-grow. Set it to 0 for the blue and red container, and something big for the green one:

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

A very good cheat sheet can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also, don't forget the other properties like display: flex;and justify-content: space-between. It's perfectly explained in the above link.

Note, however, that you don't have to use flexbox. you can achieve the same with float, which makes it compatible with older browsers (To do so, just use display: block; and add float: left to the blue div and float: right; to the red one.)

这篇关于如何排列三个flex div并排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！