Flexbox - 如何左对齐最后一个弹性项目？ [复制]答案

【问题标题】：Flexbox - how to align left the last flex item? [duplicate]Flexbox - 如何左对齐最后一个弹性项目？ [复制]
【发布时间】：2018-01-29 17:22:55
【问题描述】：

你知道如何对齐 flexbox 块中的最后一个字符串吗？

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

.wrapper p {
  flex: auto;
  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>

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

非常感谢您的帮助！

-- 已编辑--

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

【问题讨论】：

【解决方案1】：

只需从 .wrapper p 的规则中删除 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>
  <p>K</p>
</div>

【讨论】：

【解决方案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>

【讨论】：