html - flex 方向 : column-reverse except the first element

Question

我有多个 article 元素，它们喜欢倒序排列，但第一个元素是 header 元素，我需要它粘在顶部， 我如何反转除第一个 header 元素之外的所有元素？

#content {
  display: flex;
  flex-direction: column-reverse;
}

和

<div id="content">
  <header>something</header>

  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</div>

Answer 1

使用 order 属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/order

#content {
  display: flex;
  flex-direction: column-reverse;
}
header {
  order: 1;
}

<div id="content">
  <header>something</header>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</div>