Question

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

我玩了房产，但我无法收到满足我需求的东西。

有道理：

＆＃13;

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

＆＃13;

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

＆＃13;

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

居中：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你想要的更像是空间吗？

当只有一个元素时，

space-between之间无法做任何事情

＆＃13;

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

＆＃13;

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

＆＃13;

如何＆＃34;证明＆＃34;和中心flex容器项目？

1 个答案: