CSS 在桌面和移动设备上为 2 列和 3 列编写 flexbox 代码（换行）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30696662/
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
Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)
提问by Mike Feng
I'm having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout.
我真的很难弄清楚这个 CSS flexbox 解决方案。基本上有两个问题，一个有 2 列，另一个有 3 列布局。
2-Column:
This, I think, may be pretty straightforward:
2-Column：
我认为，这可能非常简单：
3-Column:
This is probably a bit more advanced:
3 列：
这可能更高级一些：
The container class is, well, .container, and the children are just .left, .right, and .middle. Not sure if it's relevant, but the width of .containeris 100% of viewport. I should probably add that using Bootstrap is not possible, due to reasons out of my control.
容器类是，嗯，，.container而子类只是.left，.right， 和.middle。不确定它是否相关，但宽度.container是视口的 100%。我应该补充一点，由于我无法控制的原因，无法使用 Bootstrap。
回答by disinfor
Here's how you do it for the three columns. I'm only adding that, because it's a bit more tricky:
以下是对三列执行此操作的方法。我只是补充一下，因为它有点棘手：
HTML
HTML
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS
CSS
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:flex-start;
align-items:stretch;
}
.left {order:1; background:red; flex-basis:100%; height:300px}
.middle {order:3; background: green;flex-basis:100%; height:300px;}
.right {order:2; background:yellow;flex-basis:100%; height:300px;}
@media screen and (min-width:600px) {
.container {
flex-wrap:nowrap;
}
.left {
flex-basis:200px;
order:1;
}
.middle {
flex-basis:1;
order:2;
}
.right {
flex-basis:200px;
order:3;
}
}
And the fiddle http://jsfiddle.net/2touox81/
和小提琴http://jsfiddle.net/2touox81/
As you can see, you can set column order for flex items.
如您所见，您可以为弹性项目设置列顺序。
Hope this helps.
希望这可以帮助。
回答by Oriol
I will assume desktop means screen wider than 600px, mobile less.
我将假设桌面意味着屏幕宽度超过 600 像素，移动设备更少。
The 2-column layout is very simple:
2 列布局非常简单：
body {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Allow multiple lines */
}
#left, #right {
flex: 1 300px; /* Initial width of 600px/2
Grow to fill remaining space */
min-width: 0; /* No minimal width */
}
body {
display: flex;
flex-wrap: wrap;
text-align: center;
font-weight: bold;
}
#left, #right {
flex: 1 300px;
min-width: 0;
background: #f55;
padding: 15px 0;
}
#right {
background: #57f;
}<div id="left">Left</div>
<div id="right">Right</div>The 3-column is only a bit more complex:
3 列只是稍微复杂一点：
body {
display: flex; /* Magic begins */
}
#left, #right, #middle {
min-width: 0; /* No minimal width */
}
#left, #right {
flex-basis: 200px; /* Initial width */
}
#middle {
flex: 1; /* Take up remaining space */
}
@media screen and (max-width: 600px) { /* Mobile */
body {
flex-direction: column; /* Column layout */
}
#left, #right {
flex-basis: auto; /* Unset previous 200px */
}
#middle {
order: 1; /* Move to the end */
}
}
body {
display: flex;
text-align: center;
font-weight: bold;
}
#left, #right, #middle {
min-width: 0;
padding: 15px 0;
}
#left, #right {
flex-basis: 200px;
background: #f55;
}
#right {
background: #57f;
}
#middle {
flex: 1;
background: #5f6;
}
@media screen and (max-width: 600px) {
body {
flex-direction: column;
}
#left, #right {
flex-basis: auto;
}
#middle {
order: 1;
}
}<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>