Question

是否有一种方法可以使用纯css使2个div占用50％的宽度，然后在一个的div上设置display:none等css属性，导致另一个占据100％的宽度？

我正在寻找一个解决方案，我只需要在其中一个元素上更改css，以占用其余空间。

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

jsFiddle

将flex-grow: 1（或flex: 1）应用于Flex容器的子项（＆＃34; flex items＆＃34;）告诉他们在它们之间均匀分配可用空间。

使用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 property definition ~MDN
flex-grow property definition ~CSS-Tricks
7.1. The flex-grow Shorthand ~W3C

浏览器支持：

所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速生成前缀，请使用Autoprefixer。 this answer中的更多详细信息。

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

1 个答案:

jsFiddle