Flex项目移除时占用同级项目的空间 [英] Flex item to occupy space of sibling item when removed

问题描述

说，我有一个全长的三列布局，像这样的全高包装：

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

现在， col2 可以隐藏或显示，使用jquery动画，将其从浏览器的左边缘滑入，或从左边缘滑出。 col1 始终存在，所以 other-stuff 。
$ b $ < col1 和 col2 宽和100％的高度。

我需要的是其他东西占据剩余的水平屏幕空间，如果 col2 存在，则缩小，当 col2 被动画返回页面外时增加。我应该如何解决这个问题？ 解决方案

考虑使用 flex-grow 属性一个弹性项目占用任何剩余的空间。

例如，你会说：

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

这会告诉物品尽可能水平拉伸（假设 flex-direction：row ）。如果 .col-2 不见了，它将拉伸容器的整个宽度，直到碰到 .COL-1 。

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

有关示例，请参阅 DEMO 。

Say, I have a layout of three columns in a full-width & full-height wrapper like this:

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

Now, col2 can be hidden or show, with a jquery animate that either slides it in from the left edge of the browser, or out the left edge. col1 is always present, so is other-stuff.

Both col1 and col2, when present are 264px wide and 100% height.

What I'd need is for other-stuff take up the remaining of horizontal screen space, and shrink if col2 is present, and grow when col2 is animated back out of the page. How should I tackle this?

解决方案

Consider using the flex-grow property, which tells a flex item to occupy any free remaining space.

So for instance you would say:

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

This would tell the item to stretch horizontally as much as possible (assuming flex-direction: row).

If .col-2 were missing it would stretch the full width of the container until it hits .col-1.

If .col-2 were present it would stretch until it his .col-2.

For an illustration see this DEMO.

这篇关于Flex项目移除时占用同级项目的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！