如何使用 display:flex 和 justify-content:space-between，如果只有其中一个，flex-item 会居中？

Question

我有一个div，即display: flex，其中包含未知数量的弹性项目。我想使用justify-content: space-between，但问题是当有 one 项时，它会向左侧移动，而我希望它向中心移动。有没有唯一的 CSS 解决方案？

#container {
    display: flex;
    justify-content: space-between;
}

<div id="container">
    <div class='flex-item'></div>
    ...n flex-items...
</div>

然后我把一些块元素放在那里（类名-.flex-items），由于justify-content: space-between，它使divs之间的空间均匀分布，所以最左边的div接触到左边框和最右边的div 触及右边框。它反应灵敏。我的问题是只有一个flex-item 时的默认行为是左对齐，但我希望它居中对齐。什么是纯 CSS 解决方案？

Answer 1

你是这样做的：

#container {
    display: flex;
    justify-content: space-between;
}

.flexItem:nth-child(1):nth-last-child(1) {
    margin: 0 auto;
}