Flex包装-反向正常内容顺序？

如果你结合使用first-child,nth-last-child你可以计算孩子的数量,如果只有1或3,第一个是全宽,否则它们是半宽.

而.item:first-child:nth-last-child(3)规则的工作原理是,当第一个孩子,也是从3月底,我们知道有3项,并在规则中踢.

堆栈代码段

.container {
  display: flex;
  flex-wrap: wrap;
}

.item:only-child,
.item:first-child:nth-last-child(3) {
  flex-basis: 100%;
}

.item {
  flex-basis: 50%;
}