为什么订单属性不在块容器中的div上工作？

Question

我有一个容器与display: block。在他们里面我有3个div。现在我不想像我编码那样订购它们，但那是不可能的，因为我的容器div是display: block，而不是display: flex。

在我的情况下，我想要3个div是一个低于另一个。这就是我放块的原因。

这是JSFIDDLE演示，我试图解决我的问题。 https://jsfiddle.net/u441j2rv/1/

HTML

<div id="blockContainer">
    <div>Block A</div>
    <div>Block B</div>
    <div>Block C</div>
</div>

CSS

#blockContainer{
    display: block;
}
#blockContainer div:nth-of-type(1){
  background:red;
  -webkit-order: 3;
  order:3;
}
#blockContainer div:nth-of-type(2){
  background:green;
  -webkit-order: 1;
  order: 1;
}
#blockContainer div:nth-of-type(3){
  background:blue;
  order: 2;
  order: 2;
}

Answer 1

order是display: flex的功能。因此，您需要更新您的代码，如下所示。

#blockContainer {
  display: flex;
  flex-direction: column;
}
#blockContainer div {
  flex: 1;
}
#blockContainer div:nth-of-type(1) {
  background: red;
  -webkit-order: 3;
  order: 3;
}
#blockContainer div:nth-of-type(2) {
  background: green;
  -webkit-order: 1;
  order: 1;
}
#blockContainer div:nth-of-type(3) {
  background: blue;
  -webkit-order: 2;
  order: 2;
}

<div id="blockContainer">
  <div>Block A</div>
  <div>Block B</div>
  <div>Block C</div>
</div>

Answer 2

CSS订单属性

order属性指定灵活项目相对于同一容器内其他灵活项目的顺序。

注意：如果元素不是灵活项，则order属性不起作用。

来自：w3schools.com