我有以下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