Html 如何并排排列三个flex div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31476024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to arrange three flex div side by side
提问by Thusitha Wickramasinghe
I have three divs in content div, When browser resizing
我在内容 div 中有三个 div，当浏览器调整大小时
- blue and red div must have their fixed width
- green div must resize to left space
- 蓝色和红色 div 必须有固定的宽度
- 绿色 div 必须调整到左边的空间
I also tried this in css
我也在 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
此代码不会调整绿色 div 的大小，在某些浏览器中未显示红色面板
I also tried float: leftand
我也试过float: left和
display: -webkit-flex;
display: flex;
but not working correctly. How to do this?
但不能正常工作。这该怎么做？
采纳答案by maja
Use flex-grow. Set it to 0 for the blue and red container, and something big for the green one:
使用flex-grow. 对于蓝色和红色容器将其设置为 0，对于绿色容器将其设置为 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;
}
A very good cheat sheet can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
一个非常好的备忘单可以在这里找到：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.
另外，不要忘记其他属性，如display: flex;and justify-content: space-between。它在上面的链接中得到了完美的解释。
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: leftto the blue div and float: right;to the red one.)
但是请注意，您不必使用 flexbox。您可以使用 实现相同的效果float，这使其与旧浏览器兼容（为此，只需使用display: block;并添加float: left到蓝色 div 和float: right;红色div 。）
回答by Oriol
You can use the flexshorthand property, which defines the flexible behavior of an item:
您可以使用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>