当它是唯一的孩子时，居中一个弹性项目答案

【问题标题】：Center a flex item when it is an only child当它是唯一的孩子时，居中一个弹性项目
【发布时间】：2018-01-25 13:47:00
【问题描述】：

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

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

justify-content: space-between;

如果只有一个元素，我希望它居中。

例如codepen

这可能只使用 CSS 吗？

【问题讨论】：

你为什么用space-between而不是center？
如果有多个元素，我希望它使用空格。只有当有一个元素时才希望它居中。
那么为什么不给只有一个元素的类并给它justify-content: center;呢？
你也可以考虑使用space-around
当有多个元素时，space-around 不会将元素附加到容器的结尾/开头。

标签： css flexbox

【解决方案1】：

只需将margin: auto 添加到您的项目。希望它是您正在寻找的。p>

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

a {
  margin: auto;
}

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

【讨论】：

嘿，类似于设置 justify-content: space-around。请注意，当有多个项目时，它是如何居中而不对齐到容器末尾的。

【解决方案2】：

这就是答案

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

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

【讨论】：

【解决方案3】：

是的。 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. Aligning with auto margins

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

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

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

【讨论】：