如何結合flexbox秩序和n孩子（單數）

我有5個div，每隔一個div應該有一個不同於其他顏色。如何結合flexbox秩序和n孩子（單數）

<div class="element element1">Element1</div> 
<div class="element element2">Element2</div> 
<div class="element element3">Element3</div> 
<div class="element element4">Element4</div> 
<div class="element element5">Element5</div>

在我的CSS我有

.element { 
background-color: grey; 
} 

.element:nth-child(odd) { 
background-color: pink; 
}

現在這些動態元素的順序將發生變化，這是我想Flexbox的做。含義我的CSS是這樣，那麼：

.element { 
background-color: grey; 
display:flex; 
} 

.element5 { 
order: 1; 
} 

.element2 { 
order: 2; 
}

由於Flexbox的是不會改變的DOM，在第n個孩子（奇）仍將風格每秒DOM元素，這不是訂單的用戶將看到的。但那就是我想要的。即使元素用flexbox更改順序，用戶看到的每個第二個元素都應該具有不同的顏色。有沒有人有一個想法如何可以工作？我只能使用CSS或HTML，而不使用JavaScript或PHP。

來源

2016-08-03 Barbara

可能的重複[斑馬條紋與包裝物品的柔性表]（http://stackoverflow.com/questions/35355253/zebra-striping-a-flexbox-table-with-wrapping-items） – TylerH

我想這是不同的。不幸的是，我沒有一個可以添加背景顏色的類，這個必須由CSS/SASS動態地完成。 – Barbara

你不能用CSS做這個...你需要JavaScript。那麼它會很棘手。 –

假設佈局始終如上所述。

首先您需要在容器中設置display flex，而不是在元素中。其次，如果您將元素5 | 2分別設置爲1 | 2，它們將始終處於末尾，因爲默認順序爲0（零）。

讓你以|假設粗體是奇數新的顏色

ORIGINAL ORDER（DOM）：

FLEX ORDER：

.flex-container { 
 
    /*SET DISPLAY FLEX ON CONTAINER*/ 
 
    -ms-box-orient: horizontal; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
} 
 
/*SET THE NEW ORDER*/ 
 
.element:nth-of-type(2){ order: 2;} 
 
.element:nth-of-type(5) { order: 1; } 
 

 
/*PRESENTATION PROPOUSES ONLY*/ 
 
.element, 
 
.normal{ 
 
    background: grey; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 5px; 
 
    
 
    line-height: 100px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
} 
 

 
/* TARGET NEW ODD ELEMENTS*/ 
 
.element:nth-of-type(1), 
 
.element:nth-of-type(2), 
 
.element:nth-of-type(4){ 
 
    background: pink; 
 
} 
 

 
/* TARGET ORIGINAL ORDER*/ 
 
.normal:nth-child(odd){ 
 
background: pink; 
 
}

<h1>FLEX ORDER</h1> 
 
<div class="flex-container"> 
 
    <div class="element element1">1</div> 
 
    <div class="element element2">2</div> 
 
    <div class="element element3">3</div> 
 
    <div class="element element4">4</div> 
 
    <div class="element element5">5</div> 
 
</div> 
 
<h1>ORIGINAL ORDER</h1> 
 
<div class="flex-container"> 
 
    <div class="normal">1</div> 
 
    <div class="normal">2</div> 
 
    <div class="normal">3</div> 
 
    <div class="normal">4</div> 
 
    <div class="normal">5</div> 
 
</div>

如果你只在某些device.Let說，你想從平板電腦的移動和Flex +訂單（13452）默認順序（12345）最多可以有使用Flex &訂單@media查詢保留默認（ ORIGINAL ORDER）改變顏色與第n個孩子（奇數），然後爲媒體查詢內的其他設備添加上述代碼（FLEX ORDER）。

謝謝。

來源

2017-06-02 17:00:14 T04435

如何結合flexbox秩序和n孩子（單數）

回答

相關問題