弹性项目均匀分布，但第一个项目左对齐

Question

Flexbox 的 justify-content: space-around 使我的列表项水平均匀分布。有没有办法得到完全相同的东西，唯一的区别是左边的第一个项目左边没有空间？ （即列表从容器的左边缘“开始”）

原文由 drake035 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 justify-content: space-between ，但最后的内容右侧也没有空格。

一个很好的 文档。

原文由 Shiva127 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种方式 ：

• 使用 css 属性创建一个“拆分器”元素 flex-grow: 1 。
• 将 CSS 属性 display: flex 添加到包装面板。
• 在需要的地方添加拆分器

下面的简短示例，拆分器元素标记为红色

 .main
{
  display: flex;

  border: 1px dashed black;
}

.element
{
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid blue;
}

.splitter
{
  flex-grow: 1;

  border: 1px solid red;
  margin: 3px;
}

 <div class="main">
  <div class="element">
  </div>
  <div class="element">
  </div>

  <div class="splitter">

  </div>

  <div class="element">
  </div>

  <div class="splitter">

  </div>

  <div class="element">
  </div>
  <div class="splitter">

  </div>
</div>

原文由 Pascal Goldbach 发布，翻译遵循 CC BY-SA 4.0 许可协议