Css Flexbox之间的空间，但如果一个元素居中

我有下面的HTML和CSS

<div class="container-box">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="container-box">
  <div class="box"></div>
</div>

它给出了这样的布局：

多个项目的第一个布局符合我的预期，但如何更改第二个布局以将元素定位在中心，因为它只有一个元素

---

请参阅此代码笔：

对于容器中有一个项目的情况，可以使用

：only child

伪类

将此添加到您的代码中：

.box:only-child {
  margin: 0 auto;
}

。集装箱箱{
宽度：200px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
背景色：红色；
利润率：50像素；
}
.盒子{
背景色：#9009A0；
高度：50px；
宽度：50px；
}
.盒子：独生子女{
保证金：0自动；
}

---

有关信息，如果您想了解非常旧的浏览器，还可以同时使用

:first child

和

:last child

）

。集装箱箱{
宽度：200px；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
背景色：红色；
利润率：50像素；
}
.盒子{
背景色：#9009A0；
高度：50px；
宽度：50px；
}
.容器盒.盒：第一个孩子：最后一个孩子{
保证金：0自动；
}

---

这里有一个只有边距的不同想法：

。集装箱箱{
宽度：400px；
显示器：flex；
背景色：红色；
利润率：30像素；
}
.盒子{
背景色：#9009A0；
高度：50px；
宽度：50px；
}
.盒子：第一个孩子{
右边距：自动；
}
.盒子：最后一个孩子{
左边距：自动；
}

如果容器中有使用

display:none

@GrantHumphries隐藏的元素，则此操作不起作用，因为

display:none

不会将该元素作为HTML中的同级元素删除。但可能还有另一种解决办法。在这里发布演示或新问题。

.box:only-child {
  margin: 0 auto;
}