html – 如何组合flexbox命令和nth-child(奇数)

2019年7月21日 355次阅读

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

最佳答案 假设布局总是像你把它放在上面那样.

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

其次,如果将Element 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&仅在某些设备中订购.假设您想要从平板电脑上移动和弹性订单(13452)中的默认订单(12345),您可以让@media查询保留默认(原始订单)以更改颜色与nth-child(单数)和然后对于媒体查询内的其他设备添加上面的代码(FLEX ORDER).

谢谢.

点赞