flex-direction:除第一个元素外的列反向

Question

我有多个article元素更喜欢反向顺序,但第一个元素是一个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>