Flexbox - 如何对齐最后一个弹性项目？

Question

您是否知道如何在flexbox块中对齐最后一个字符串？

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper p {
  flex: auto;
  width: 200px;
}

＆＃13;

<div class="wrapper">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
  <p>H</p>
  <p>I</p>
  <p>J</p>
</div>

＆＃13;

＆＃13;

＆＃13;

一切正常，但最后一个字符串打破的块不如我想要的那么好。在下面的屏幕截图中，您可以看到块的行为和我的红色笔记我想要的。

非常感谢您的帮助！

- 已编辑 -

抱歉，我没有指定我想保存包装标签的全宽度。如果我从子块中删除 flex：auto; ，则它变得不是全宽https://i.imgur.com/Bb932yA.png

Answer 1

只需从flex: auto;的规则中删除.wrapper p：

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper p {
  width: 200px;
}

<div class="wrapper">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
  <p>H</p>
  <p>I</p>
  <p>J</p>
  <p>K</p>
</div>

Answer 2

尝试从代码中删除flex:auto;。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.wrapper p {
  width: 200px;
}

<div class="wrapper">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
  <p>H</p>
  <p>I</p>
  <p>J</p>
</div>