CSS Flexbox间距与堆叠[重复]答案

【问题标题】：CSS Flexbox spacing with stacking [duplicate]CSS Flexbox间距与堆叠[重复]
【发布时间】：2018-07-21 16:39:52
【问题描述】：

假设，我在一个 div 中有 3 个 div A、B 和 C，这是一个 flex。

[ABC....]

我只想在 B 和 C 之间分配剩余空间，即我想实现这个

[AB....C]

是否有一些属性可以帮助我指定在 B 和 C 之间分配空间，或者换句话说使 B 与 A 堆叠？

注意：我想在没有任何 div 嵌套的情况下执行此操作。

谢谢。

【问题讨论】：

标签： css flexbox

【解决方案1】：

只需像这样使用边距和自动值，无需添加额外的标记：

#list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  border: 1px solid;
  padding: 8px;
}
li:last-child {
  margin-left:auto;
}

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

【讨论】：

这个不错。你能在这里解释一下 auto 是如何工作的吗？
这里是官方规范，你可以阅读w3.org/TR/css-flexbox-1/#auto-margins ;)
@nitrogen 也检查上面的重复链接

【解决方案2】：

添加一个具有高 flex-grow 值的空元素。这将消耗可用空间。

#list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  border: 1px dotted currentColor;
  padding: 8px;
}
.spacer {
  flex-grow: 100;
}

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li class="spacer"></li>
  <li>C</li>
</ul>

【讨论】：

会让 flex-grow 太高会导致渲染变慢吗？
不，它只是一个加权系统。只有 1 的值可以在这里使用，因为其他值有 0。
很好的解决方案，但我正在努力提高可读性，没有任何虚拟元素。我还需要为虚拟元素编写媒体查询（如果我需要更改布局）。