如何根据元素的弹性框顺序设置元素样式

Question

我有一些元素DIV,根据屏幕的大小重新排序.我想根据它们的弹性盒顺序不同地设置每个元素的样式.因为媒体查询在框架内部,所以我宁愿不编写自己的媒体查询来执行此操作,因为如果框架更改了媒体查询的断点,我不想记得更改我的媒体查询.我尝试使用+兄弟选择器,但显然这仅适用于原始标记中元素的顺序,而不适用于弹性框渲染顺序.有没有办法根据渲染DOM中出现的顺序为元素设置样式？

Answer 1

正如评论中提到的，您将无法使用 nth-child，因为样式将应用于实际 DOM 的顺序，而不是渲染的 DOM。

为此，您必须向标记添加额外的类。因此，不要使用 nth-child 重新排序，而是使用额外的类重新排序。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.flexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flexGrid__item {
  border: 1px solid pink;
  width: 50%;
  height: 100px;
}

.flexGrid__item--alpha {
  background: pink;
  order: 1;
}

.flexGrid__item--bravo {
  order: 2;
}

.flexGrid__item--charlie {
  order: 3;
}

.flexGrid__item--delta {
  order: 4;
}

@media screen and (min-width: 500px) {
  .flexGrid__item {
    width: 25%;
  }
  .flexGrid__item--alpha {
    order: 5;
  }
}

<div class="flexGrid">
  <div class="flexGrid__item flexGrid__item--alpha"></div>
  <div class="flexGrid__item flexGrid__item--bravo"></div>
  <div class="flexGrid__item flexGrid__item--charlie"></div>
  <div class="flexGrid__item flexGrid__item--delta"></div>
</div>

这个小提琴的更多细节： https ://jsfiddle.net/pua5u8a4/1/