Javascript 使用'；订单'；属性在同级之间定位弹性项

我有一个弹性盒子，里面有一到三个弹性物品

在包含flex的框中，正确的布局应类似于

只有在布局顺序保持不变的情况下，我才有代码来实现这一点（请参见）

我的问题是：如何有一个方法来确保，如果标记不总是按顺序（比如说我的一个同事不能正确地做），我怎么设置它，以便<代码> <代码>总是显示在中间（或者在只有一个div和一个H2的情况下尽可能接近）。 为了实现这一点，我一直在使用

order

属性；然而，我不是没有充分利用它的潜力，就是它是一个错误的解决方案

我将JSFIDLE作为它的测试平台，但也有以下示例：

.diff-order {
  order: 2
}
.diff-order:not(h2) {
  order: 1;
}

.container{
显示器：flex；
}
.容器>*{
flex:1；/*键规则*/
边框：1px红色虚线；
}
h2{
文本对齐：居中；
保证金：0；
}
.container>div{
显示器：flex；
}
.diff订单{
订单：2
}
.差异顺序：非（h2）{
顺序：1；
}
p{文本对齐：居中；}
p>span{背景色：浅绿色；填充：5px；}

我是h2
我是个大傻瓜
我是个大傻瓜
我是个大傻瓜
我是个大傻瓜
我是h2
我是个大傻瓜
我是个大傻瓜
我是个大傻瓜
我是个大傻瓜

当容器中有三个元素时：

• div

• h2

• div

及

• 这些元素的顺序因来源而异

及

<>你希望<代码> H2总是在中间…

然后，您可以这样做：

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

这意味着：

无论源中元素的顺序如何

• 第一个div将在视觉顺序中首先出现

• h2

  将以可视顺序显示在第二位
• 第二个div将在视觉顺序中最后出现

.container{
显示器：flex；
}
.容器>*{
弹性：1；
边框：1px红色虚线；
}
h2{
文本对齐：居中；
保证金：0；
}
.container>div:类型{order:1；}的第一个
.container>h2{顺序：2；}
.container>div:类型{order:3；}的最后一个
p{文本对齐：居中；}
p>span{背景色：浅绿色；填充：5px；}

我是h2
我是斯潘1号
我是斯潘2号
我是斯潘3
我是斯潘1号
我是斯潘2号
我是斯潘3
我是h2
我是斯潘4号
我是斯潘5号
我是斯潘6号
我是斯潘1号
我是斯潘2号
我是h2
我是斯潘3
我是个大傻瓜
我是个大傻瓜
我是h2
我是个大傻瓜
我是个大傻瓜
我是h2
我是h2
我是个大傻瓜
我是个大傻瓜
我是个大傻瓜
我是个大傻瓜
真中心