html - CSS:Flexbox 顺序不起作用

Question

我只是想不通为什么以下内容不起作用。

有一个 div#wrapper，它是一个 flexbox，里面有一堆 div，我想颠倒它们的顺序。

<div id="wrapper">

  <div id="one">One<div>
  <div id="two">Two</div>
  <div id="three">Three</div>
  <div id="four">Four</div>

</div>

CSS:

#wrapper {
  display: flex;
}

#one {
  order: 4;
  background-color: gray;
}

#two {
  order: 3;
  background-color: green;
}

#three {
  order: 2;
  background-color: blue;
}

#four {
  order: 1;
  background-color: orange;
}

Answer 1

关闭你的

<div id="one">One<div>

替换为:

<div id="one">One</div>