我真的很难弄清楚这个 CSS flexbox 解决方案。基本上有两个问题，一个是 2 列布局，另一个是 3 列布局。
2 列：
我认为这可能非常简单：
3 列：
这可能更高级一些：
容器类是，嗯，.container，而孩子们只是.left, .right, and .middle。不确定是否相关，但宽度.container是视口的 100%。我可能应该补充一点，由于我无法控制的原因，使用 Bootstrap 是不可能的。
以下是对三列进行操作的方法。我只是补充一点，因为它有点棘手：
.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;
}
}
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
还有小提琴http://jsfiddle.net/2tooux81/ http://jsfiddle.net/2touox81/
如您所见，您可以设置弹性项目的列顺序。
希望这可以帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
