css - Flexbox space-between but center if one element

Question

我有以下 HTML 和 CSS。

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

.container-box {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;
  margin:50px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

这给出了这个布局:

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

请参阅此代码笔:https://codepen.io/dennismadsen/pen/oNvqjjV

Answer 1

对于容器中只有一项的情况，可以使用 :only-child 伪类。

将此添加到您的代码中:

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

.container-box {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;
  margin: 50px;
}

.box {
  background-color: #9009A0;
  height: 50px;
  width: 50px;
}

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

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

在这种情况下，flex auto 边距将覆盖 justify-content 因为:

§ 8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

---

关于 :only-child 的更多信息:

§ 6.6.5.10. :only-child pseudo-class

The :only-child pseudo-class represents an element that has no siblings. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

---

关于 flex auto 边距的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

---

此外，为了突出一些有趣的 flex 行为，如果您使用 space-around 而不是 space-between，则不需要 auto边距。

• Flex item should align left, not center, when it wraps