Question

在不使用列方向的情况下，我尝试获取弹性项目以填充剩余的垂直空间。没有列似乎不可能吗？

<div class="flex-container">
  <div class="flex-item" style="height:100px">100PX</div>
  <div class="flex-item stretch-v">
    Should stretch vertically
  </div>
</div>

CSS

.flex-container {
    display: flex;
    flex-flow: row wrap;
    flex:1; // stretch to height of container
    align-content: flex-start;
}

.flex-item {
    display:flex;
    align-self: stretch; // has no effect
    flex: 100%;
}

.stretch-v {
    align-self: stretch;
}

我了解默认情况下align-content：拉伸会垂直拉伸子级。但是，它这样做是均匀的。因此，在一个元素固定高度的情况下，第二个元素仅按比例拉伸而留有间隙。

这可以用行完成吗？

更新：

似乎不可能，因为

align-content：stretch在行之间平均分配自由空间

这就是为什么在涉及固定元素甚至选择单个项目以填充剩余的v空间时这似乎是不可能的原因。这似乎是指定功能的一种奇怪方法，因为这意味着如果要控制垂直尺寸，则必须将孩子的父母的轴更改为column。

Answer 1

.stretch-v { background: #ffc0b5; height: calc(100% - 100px); }

第一个flexbox行元素固定高度，第二个填充垂直空间（无间隙）

1 个答案: