我有多个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>

最佳答案

使用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>

10-05 21:06
查看更多