Flex訂購有幹嗎？

新手來flex使用/ web開發。Flex訂購有幹嗎？

我現在有6盒訂購這樣的用於移動設備的柔性容器內： Mobile view

與代碼或多或少像這樣（不包括CSS，但是類「盒子」就是你看到的灰色框以上）：

<div class="flex-container"> 
    <div class=「box item」 /> 
    <div class=「text item」> 
     <h4>Text</h4> 
    </div> 
    <div class=「box item」 /> 
    <div class=「text item」> 
     <h4>Text</h4> 
    </div> 
    <div class=「box item」 /> 
    <div class=「text item」> 
     <h4>Text</h4> 
    </div> 
</div>

這就是我想要的移動設備！

然而對於臺式機，我想實現這一點：Desktop View

目前，我實現這一目標是通過使用這種柔性吸引力爲了CSS的唯一途徑：

item:nth-of-type(1) {order:1;} 
item:nth-of-type(2) {order:2;} 
item:nth-of-type(3) {order:4;} 
item:nth-of-type(4) {order:3;} 
item:nth-of-type(5) {order:5;} 
item:nth-of-type(6) {order:6;}

我的問題是，是否有辦法實現我期望的目標（即切換第3項和第4項的順序），而無需對容器中的每一件物品進行訂購，從而創造出一個糟糕的重複性代碼塊？

來源

2017-08-31 marly

可以實現這一目標只有2個CSS選擇器，並與order默認爲0，我們重新定位項目3和5/6，在這裏與媒體查詢完成屏幕寬度超過600像素，至1和2。

.item:nth-of-type(3) { order:1; }    /* put 3 after 4 */ 
.item:nth-of-type(n+5) { order:2; }    /* put 5,6 after 3 */

棧片斷

.flex-container { display: flex; flex-wrap: wrap; } 
 
.item   { height: 50px; flex-basis: 100%; } 
 
.box   { background: lightgray; } 
 

 
@media (min-width: 600px) { 
 
    .item     { flex-basis: 50%; } 
 
    .item:nth-of-type(3) { order:1; }    /* put 3 after 4 */ 
 
    .item:nth-of-type(n+5) { order:2; }    /* put 5,6 after 3 */ 
 
}

<div class="flex-container"> 
 
    <div class="box item"></div> 
 
    <div class="text item"> 
 
    <h4>Text</h4> 
 
    </div> 
 
    <div class="box item"></div> 
 
    <div class="text item"> 
 
    <h4>Text</h4> 
 
    </div> 
 
    <div class="box item"></div> 
 
    <div class="text item"> 
 
    <h4>Text</h4> 
 
    </div> 
 
</div>

來源

2017-08-31 06:39:30 LGSon

太棒了！感謝堆。 – marly

據我所知，如果您重新訂購商品，您需要在重新訂購商品後明確訂購商品。所以，你很可能這樣做：

item:nth-of-type(3) {order:4;} 
item:nth-of-type(4) {order:3;} 
item:nth-of-type(5) {order:5;} 
item:nth-of-type(6) {order:6;}

來源

2017-08-31 00:54:24 TripWire

如果您只想轉這兩個，你可以換一種柔性的容器包裝他們，並簡單地切換中的排序。這樣，您的外部流程就不必重新定義，您可以將容器設置爲在需要實現相同目標的其他區域重複使用。

<div class="container"> 
    <div class="item one">One</div> 
    <div class="item two">Two</div> 
    <div class="item three">Three</div> 
    <div class="switch"> 
    <div class="item four">Four</div> 
    <div class="item five">Five</div> 
    </div> 
    <div class="item six">Six</div> 
    <div class="item seven">Seven</div> 
</div> 


.item { 
    flex: 1 0 100%; 
    line-height: 39px; 
    height: 40px; 
    width: 100%; 
    background: #cecece; 
    margin-bottom: 10px; 
    text-align: center; 
} 
.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.switch { 
    display: flex; 
    flex-wrap: wrap; 
    flex: 1 0 100%; 
} 

@media (min-width: 400px) { 
    .switch .item:nth-of-type(1) { 
    order: 2; 
    } 
}

fiddle

來源

2017-08-31 01:17:59 monners

真的很喜歡這種方法。謝謝。 – marly

這就是upvote按鈕的作用:) – monners

哈哈，我點了它，但不幸的是我有不到15的聲望！ – marly

除了絆的答案，你需要的不是一個4之後設置不同訂單號以便每<div>。

.item:nth-of-type(3), .item:nth-of-type(4) ~ .item {order:100;} 
.item:nth-of-type(4) {order:50;}

一支筆：https://codepen.io/israfel/pen/eEbWWG

來源

2017-08-31 01:32:51 Israfel

Flex訂購有幹嗎？

回答

相關問題