Question

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

[ABC ...

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

[AB .... C]

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

注意：我想在没有任何div嵌套的情况下这样做。

谢谢。

Answer 1

添加一个值flex-grow高的空元素。这将占用可用空间。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需使用此类保证金和自动值，无需添加额外标记：

#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>

CSS Flexbox间距与堆叠

2 个答案: