如何结合 Flexbox 顺序和第 n 个子级（奇数）

Question

我有 5 个 div，每个第二个 div 的颜色都应该与其他 div 不同。

<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，因此 nth-child(odd) 仍会为每个第二个 DOM 元素设置样式，这不是用户将看到的顺序。但这就是我想要的。用户看到的每个第二个元素都应该有不同的颜色，即使该元素使用 Flexbox 更改了顺序。有谁知道这是如何运作的？我只能使用 CSS 或 HTML，不能使用 JavaScript 或 PHP。

Answer 1

假设布局始终如您上面所说。

首先，您需要在容器中设置显示柔性，而不是在元素中。

其次，如果将元素 5|2 分别设置为顺序 1|2，它们将始终位于末尾，因为默认顺序为 0（零）。

所以你以 | 结尾 假设粗体是奇怪的新颜色

原始订单（DOM）：1 2 3 4 5

灵活订单：1 3 4 5 2

.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>

如果您仅在某些设备中使用 Flex & Order。假设您希望在移动设备上使用默认顺序（12345），在平板电脑上使用 Flex + 顺序（13452），您可以让 @media 查询保留默认值（原始顺序）进行更改颜色与 nth-child(odd) ，然后对于媒体查询内的其他设备添加上述代码（FLEX ORDER）。

谢谢。