Question

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

如果有多个元素，我想用

之间的空格来证明内容的合理性

justify-content: space-between;

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

示例codepen

这只能使用CSS吗？

Answer 1

这是答案

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

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

Answer 2

是。 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选择器适用时，自动边距优先。

Answer 3

只需将margin: auto添加到您的商品中即可。希望这是你在寻找的。

.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>

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

3 个答案: