css - 如何将 "justify"和 center flex 容器元素？

Question

例如，我在一个 flex 容器中有 3 个 flex 元素。当它们都在一行中时，它们是对齐的(看起来像属性 space-between)，但是当最后一个元素放在第二行时，两个第一个元素必须仍然对齐，最后一个必须居中，如果可能的话填满所有空间。

我玩过属性，但我无法收到接近我需要的东西。

合理的:

.fbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
}
.finline {
  display: inline-flex;
  justify-content: center;
}

<div class="fbox">
  <div class="finline">Some quite long text</div>
  <div class="finline">Some quite long text</div>
  <div class="finline">Some quite long text</div>
</div>

当您向上滚动到最后一个元素时转到第二行，它位于左侧，但我需要它居中。

居中:

.fbox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.finline {
  display: inline-flex;
  justify-content: center;
}

<div class="fbox">
  <div class="finline">Some text here</div>
  <div class="finline">Another text</div>
  <div class="finline">Even more text</div>
</div>

在这种情况下，第二行元素居中，但元素没有对齐。 (计数器的边框和元素之间没有空格)。

Answer 1

可能您想要的更像是 space-around ？

只有一个元素时，space-between什么也做不了

.fbox {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
}
.finline {
  display: inline-flex;
  justify-content: center;
}

<div class="fbox">
  <div class="finline">Some quite long text</div>
  <div class="finline">Some quite long text</div>
  <div class="finline">Some quite long text</div>
</div>