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，因此第n个子（奇数）仍然会为每个第二个DOM元素设置样式，这不是用户将看到的顺序。但这就是我想要的。用户看到的每个第二个元素应该具有不同的颜色，即使元素使用flexbox更改顺序也是如此。有谁知道这是如何工作的？我只能使用CSS或HTML，没有JavaScript或PHP。

Answer 1

假设布局总是像你把它放在上面那样。

首先您需要在容器中设置display flex，而不是在元素中设置。

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

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

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

FLEX ORDER： 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＆amp;仅在某些设备中订购。假设您想要移动设备中的默认订单（12345）和平板电脑上的flex +订单（13452），您可以让@media查询保留默认设置（ ORIGINAL ORDER ）以更改颜色使用nth-child（单数），然后对于媒体查询中的其他设备添加上述代码（ FLEX ORDER ）。

感谢。

Answer 2

我的解决方案：

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;
        }
      }
    }
  }
}

如何组合flexbox命令和nth-child（奇数）

2 个答案: