新手來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項的順序),而無需對容器中的每一件物品進行訂購,從而創造出一個糟糕的重複性代碼塊?
太棒了!感謝堆。 – marly