两列,当一个被隐藏时,另一列扩展整个宽度

Question

是否有一种方法用纯css使2个div占用50%的宽度,然后设置一个css属性,如display:none在其中一个 div上,导致另一个占用100%的宽度？

我正在寻找一个解决方案,我只需要在其中一个元素上更改css,以占用剩下的空间.

Answer 1

您正在寻找的是flex-grow属性,它告诉Flex容器中的元素占用可用空间.

因此,当一条线上有两个元素时,它们将占用尽可能多的空间,最终会损失50/50.但如果删除了一个元素,另一个元素将自动消耗剩余空间.

.container {
    display: flex;
}

.box {
    flex-grow: 1;  /* key rule */
    height: 50px;
    border: 1px solid #aaa;
}

.box1 {
    /* display: none; */
    background-color: aqua;
}

.box2 {
    /* display: none; */
    background-color: red;
}

<div class="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
</div>

的jsfiddle

将flex-grow: 1(或flex: 1)应用于Flex容器的子项("flex items")告诉它们在它们之间均匀分配可用空间.

用flex-grow: 1:

• 四个弹性项目每个消耗25%
• 三项= 33.33%
• 两件事= 50%
• 一项= 100%

任何时候删除一个项目,其他人将分配他们之间的可用空间.

还阅读有关该flex属性,因为规范提出以下建议:

鼓励作者使用flex速记而不是flex-grow直接控制灵活性,因为速记会重置任何未指定的组件以适应常见用途.

_{来源:https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow}

参考文献:

• flex-grow属性定义 ~MDN
• flex-grow属性定义 ~CSS-Tricks
• 7.1.该flex-grow速记〜W3C

浏览器支持:

所有主流浏览器都支持Flexbox,IE 8和9除外.最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速生成前缀,请使用Autoprefixer.这个答案的更多细节.