Flex 项目在移除时占用同级项目的空间

Question

说，我有一个全宽和全高包装器中的三列布局，如下所示：

<div class = "wrap">
    <div class="col1">
        ...
    </div>
    <div class="col2">
        ...
    </div>
    <div class="other-stuff">
        ...
    </div>
</div>

现在，col2 可以隐藏或显示，使用 jquery 动画将其从浏览器的左边缘滑入或滑出左边缘。 col1 始终存在，other-stuff 也是如此。

col1 和 col2 在出现时均为 264 像素宽和 100% 高。

我需要的是other-stuff 占用剩余的水平屏幕空间，如果存在col2，则缩小，并在col2 动画退出页面时增长。我应该如何解决这个问题？

Answer 1

考虑使用flex-grow 属性，它告诉弹性项目占用任何剩余空间。

比如你会说：

.other-stuff { flex-grow: 1; }

这将告诉项目尽可能地水平拉伸（假设flex-direction: row）。

如果.col-2 丢失，它将拉伸容器的整个宽度，直到到达.col-1。

如果存在.col-2，它将一直延伸到他的.col-2。

有关插图，请参阅此DEMO。