css - 如何根据 flexbox 顺序设置元素样式

Question

我在 DIV 中有一些元素，它们会根据屏幕大小重新排序。我想根据它们的 flex-box 顺序为每个元素设置不同的样式。因为媒体查询在框架内，所以我宁愿不编写自己的媒体查询来执行此操作，因为我不想在框架更改其媒体查询的断点时必须记住更改我的媒体查询。我尝试使用 + 兄弟选择器，但显然这只适用于原始标记中元素的顺序，而不适用于 flexbox 渲染顺序。有没有什么方法可以根据元素在呈现的 DOM 中出现的顺序来设置元素的样式？

Answer 1

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

为此，您必须向标记添加额外的类。 因此，与其使用第 n 个 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>

这个 fiddle 的更多细节: https://jsfiddle.net/pua5u8a4/1/