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

本文介绍了Flex项目移除时占用同级项目的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

$ b $ <

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

有关示例，请参阅。

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项目移除时占用同级项目的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！