将Flex项目作为唯一子项时居中

Question

我有一个可以包含一个或多个元素的flex容器.

如果有多个元素,我想使用空格来证明内容的合理性

justify-content: space-between;

如果只有一个元素,我希望它居中.

示例代码

这只能使用CSS吗？

Answer 1

是的。flexbox 规范使这成为可能。

.flex {
  display: flex;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid red;
  justify-content: space-between;
}

a:only-child {
  margin: 0 auto;
}

<div class="flex">
  <a>item 1</a>
  <a>item 2</a>
</div>
<div class="flex">
  <a>item 1</a>
</div>

从规范：

8.1. 与auto 边距对齐

在通过justify-content和对齐之前align-self，任何正自由空间都会分配到该维度的自动边距。

所以，基本上，justify-content在父级上使用，在子级上使用自动边距。

根据上面的规则，only-child选择器适用时，自动边距优先于优先。

Answer 2

这就是答案

.flex {
    display: flex;
    justify-content: space-between;

    & > *:only-child {
        margin: auto;
    }
}