你能指定CSS flex中包裝元素的順序嗎？

Question

我有一個<div>，它使用CSS flex來保持它的響應。

我正在尋找一種方式來指定順序的元素被包裹英寸

例如，我需要

1 - 2 - 3

要成爲

1 
3 
2 

當完全包裹。

當前代碼：https://jsfiddle.net/g0L44e5b/

這可能嗎？

Answer 1

入住此筆退出：

http://codepen.io/chriscoyier/pen/YPzyYa

什麼筆那樣 - 首先給每個元素的默認類的順序屬性：

.icon { 
    order: 0 !important; 
} 
.username { 
    order: 1 !important; 
    width: 100%; 
    margin: 15px; 
} 
.search { 
    order: 2 !important; 
    width: 100%; 
} 

然後，它給出了一個類每個flexbox都有一個特定的訂購屬性：

.bar-2 { 
    .username { 
    order: 2; 
    } 
} 
.icon-3 { 
    order: 3; 
} 

將排序類應用到你的案例中，你應該很好去。

Answer 2

如果您使用媒體查詢，您可以在父元素上使用flex-direction: column，在子元素上使用order: 1;,order: 2;等，以便按照您需要的順序放置它們。

Answer 3

是你可以使用order屬性：

body { 
 
    display:flex; 
 
    flex-flow:column; 
 
    } 
 
p:last-child{ 
 
    order:1; 
 
    } 
 
p:nth-child(2) { 
 
    order:2; 
 
    }

<p>1</p> 
 
<p>2</p> 
 
<p>3</p>

這裏是一個方便的ressource在您編輯後https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

編輯

包裝和mediaquerie可用於：

body { 
 
    display:flex;flex-wrap:wrap; 
 
    } 
 
p { 
 
    flex:1; 
 
    min-width:380px; 
 
    margin:10px; 
 
    border:solid; 
 
} 
 
@media screen and (max-width : 800px) { 
 
p:last-child{ 
 
    order:1; 
 
    } 
 
p:nth-child(2) { 
 
    order:2; 
 
    } 
 
}

<p>1</p> 
 
<p>2</p> 
 
<p>3</p>