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。