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

Posted 2023-03-06

【中文标题】Flexbox - 如何左对齐最后一个弹性项目？ [复制]

【英文标题】：Flexbox - how to align left the last flex item? [duplicate]

【发布时间】：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

【问题讨论】：

如果你想保持flex: autos 的弹性增长为0

删除flex: auto?

【参考方案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>