Flexbox：重新排序和堆積列

我有三列，我想交換特定屏幕大小的順序。Flexbox：重新排序和堆積列

當前順序是兩個寬度爲1/4的列，其間寬度爲1/2。

我想將兩個1/4寬度的列變成1/2寬度，並在開始處堆疊它們。

我可以使用浮動複製它，但無法找出使用flexbox的方法。

我努力得到兩個1/4寬度的列堆疊，同時是父寬度的50％。

這是fiddle。

.col1of2 { 
 
    width: 50%; 
 
    background: red; 
 
} 
 
.col1of4 { 
 
    width: 25%; 
 
    background: yellow; 
 
} 
 
.col1of4--last { 
 
    background: blue; 
 
} 
 
.col-container { 
 
    display: flex; 
 
} 
 
@media all and (max-width: 1000px) { 
 
    .col1of2 { 
 
    order: 3; 
 
    } 
 
    .col1of4 { 
 
    order: 1; 
 
    } 
 
} 
 
/* css for working example */ 
 

 
.ex1of2 { 
 
    width: 50%; 
 
    background: red; 
 
    float: right; 
 
} 
 
.ex1of4 { 
 
    display: inline-block; 
 
    width: 50%; 
 
    background: yellow; 
 
} 
 
.ex1of4--last { 
 
    background: blue; 
 
}

<H4>what i have</H4> 
 
<div class="col-container"> 
 
    <div class="col col1of4"> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
    <div class="col col1of2"> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
    <div class="col col1of4 col1of4--last"> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
</div> 
 

 
<!-- what i want it to look like when it swaps --> 
 

 
<H4>what i want to achieve</H4> 
 
<div class="ex-container"> 
 
    <div class="ex ex1of4"> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
    <div class="ex ex1of2"> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
    <div class="ex ex1of4 ex1of4--last"> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="ex__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
</div>

來源

2016-09-22 Sam Willis

這是很容易實現，如果你有對父固定高度，但我不喜歡這種解決方案我自己。不知道這是否可以通過'flex-direction：row;'來實現 –

我的每個'col1of2'和'col1of4'都有一個固定的高度，而'col1of2'基本上是兩倍的大小。我嘗試使用flex方向'列'，但無法找到一種方式讓它以相反的方式與較大的盒子一起工作。 –

我的意思是你可以用它實現它：https://jsfiddle.net/bL0m856o/但是這對內容來說是非常嚴格的，如果你希望它是動態的，它就不會工作得很好 –

的關鍵，這個佈局切換柔性容器column wrap在媒體查詢。

您還必須定義容器的高度，以便項目知道在哪裏包裝。

.col-container { 
 
    display: flex; 
 
} 
 
.col1of2 { 
 
    width: 50%; 
 
    background: red; 
 
} 
 
.col1of4 { 
 
    width: 25%; 
 
    background: yellow; 
 
} 
 
.col1of4--last { 
 
    background: blue; 
 
} 
 
@media all and (max-width: 1000px) { 
 
    .col-container { 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 100px; 
 
    } 
 
    .col1of2 { 
 
    order: 1; 
 
    } 
 
    .col1of4 { 
 
    width: 50%; 
 
    } 
 
}

<div class="col-container"> 
 
    <div class="col col1of4"> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
    <div class="col col1of2"> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
    <div class="col col1of4 col1of4--last"> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    <div class="col__inner">sssadksadkaslkslasasldkasddsa</div> 
 
    </div> 
 
</div>

revised fiddle

來源

2016-09-22 11:07:51

Flexbox：重新排序和堆積列

回答

相關問題