如何结合 flexbox 顺序和 nth-child(odd)答案

【问题标题】：How to combine flexbox order and nth-child(odd)如何结合 flexbox 顺序和 nth-child(odd)
【发布时间】：2016-12-09 10:49:09
【问题描述】：

我有 5 个 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。

【问题讨论】：

Zebra striping a flexbox table with wrapping items的可能重复
我猜这不一样。不幸的是，我没有一个可以添加背景颜色的类，这必须由 CSS/SASS 动态完成
你不能用 CSS 做到这一点......你需要 javascript。，即使那样它也会很棘手。
谢谢 Paulie，我也已经这么认为了。嗯..该死的！
@Michael_B nth-order 非常适合这个！我将编写 w3c 将其添加到 CSS :-)

标签： html css sass css-selectors flexbox

【解决方案1】：

我的解决方案：

div {
  display: flex;
  flex-direction: column;
}

div > div {
  order: 1;
  background-color: #868d95;
}

div > div:nth-child(odd) {
  background-color: #a7acb2;
}

div > div.active {
  order: 0;
  background-color: #20c36d;
}

div > div.active ~ div {
  background-color: #a7acb2;
}

div > div.active ~ div:nth-child(odd) {
  background-color: #868d95;
}

<div>
  <div>1</div>
  <div>2</div>
  <div class="active">3</div>
  <div>4</div>
  <div>5</div>
  <div>7</div>
  <div>8</div>
</div>

scss:

div {
  display: flex;
  flex-direction: column;

  & > div {
    order: 1;
    background-color: #868d95;

    &:nth-child(odd) {
      background-color: #a7acb2;
    }

    &.active {
      order: 0;
      background-color: #20c36d;

      & ~ div {
        background-color: #a7acb2;

        &:nth-child(odd) {
          background-color: #868d95;
        }
      }
    }
  }
}

【讨论】：

【解决方案2】：

假设布局总是如你所说的那样。

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

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

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

原始顺序（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。假设您希望在移动设备中使用默认 order(12345) 并在平板电脑上使用 flex + order(13452)，您可以让@media 查询保留默认值（ORIGINAL ORDER) 使用 nth-child(odd) 更改颜色，然后为媒体查询中的其他设备添加上述代码 (FLEX ORDER)。

谢谢。

【讨论】：