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

Posted 2023-03-05

【中文标题】如何结合 flexbox 顺序和 nth-child(odd)

【英文标题】：How to combine flexbox order and 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 :-)

【参考方案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)。

谢谢。