【问题标题】:Flex item to occupy space of sibling item when removedFlex 项目在移除时占用同级项目的空间
【发布时间】:2016-04-26 21:00:34
【问题描述】:

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

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

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

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

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

【问题讨论】:

    标签: jquery html css flexbox


    【解决方案1】:

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

    比如你会说:

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

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

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

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

    有关插图,请参阅此DEMO

    【讨论】:

    • 如果.col-1 有一个固定的位置,因此.other-stuff 需要在.col-2 不存在时距离左边缘246px 怎么办?当.col-2 存在时,则为 528px。
    • 解决了这个问题。. 宽度变化的捕捉有点烦人,但我可以忍受,除非你能说如何使它变得更平滑,尝试所有的过渡和flex-grow - 没用。接受 OQ 回答并正常工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-07
    • 2021-11-20
    • 2016-12-08
    • 1970-01-01
    • 2012-01-18
    • 1970-01-01
    相关资源
    最近更新 更多