我有以下Flexbox的响应行列布局
HTML
<div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
我想要实现使用Flexbox的下列布局。
移动
平板
桌面
我对移动和桌面布局没有问题，但无法为平板电脑解决问题。
如何强制.center div出现后.letf和.right？有没有办法用flexbox来实现它？
看到这个代码将实现你在平板电脑想要的东西，你可以在平板电脑大小媒体查询包裹。
关键是将左右宽度设置为50％，居中为100％，然后声明“flex-flow：row wrap;”在容器上。
#container{
display:flex;
flex-flow: row wrap;
}
.left{
order: 1;
width:50%;
background-color: red;
}
.right{
order: 2;
width:50%;
background-color: green;
}
.center{
order: 3;
width:100%;
background-color: blue;
}
<div id="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
有一个叫order一个Flexbox的性质，因为你想要的中心div来放在最后，可能是这里有用：https://css-tricks.com/almanac/properties/o/order
可能有其他的解决方案了，但是这是你应该知道:)提示：您可以使用媒体查询来根据需要更改订单。
也flex-flow: row wrap;
随着order使用和
@media(min-width:768px) {
.flexbox {
flex-flow: row nowrap;
}
...
}
在总
.flexbox {
display: flex;
flex-direction: column;
background: #565656;
padding: 5px;
align-content: space-between;
justify-content: space-between;
}
.flexbox>div {
text-align: center;
padding: 20px 0;
margin: 5px;
}
.flexbox>.left {
background-color: #D30058;
}
.flexbox>.center {
background-color: #36ABE1;
}
.flexbox>.right {
background-color: #23B776;
}
@media(min-width:576px) {
.flexbox {
flex-flow: row wrap;
}
.flexbox>.left {
order: 1;
flex: 0.5;
}
.flexbox>.right {
order: 2;
flex: 0.5;
}
.flexbox>.center {
order: 3;
width: 100%;
}
}
@media(min-width:768px) {
.flexbox {
flex-flow: row nowrap;
}
.flexbox>div {
width: 33.33% !important;
}
.flexbox>.left {
order: 1;
}
.flexbox>.center {
order: 2;
}
.flexbox>.right {
order: 3;
}
}<div class="flexbox">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
不错的作品，你已经证明了我在描述和发布的同时:) – agm1984
@TidyDev谢谢先生！ – koryakinp