html - 两列，隐藏一列时，另一列展开全宽

Question

有没有办法用纯 css 使 2 个 div 占用 50% 的宽度，然后在 一个 上设置一个 css 属性，例如 display:none , 导致另一个占用 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 元素”)告诉它们在它们之间平均分配可用空间。

使用flex-grow: 1:

• 四个 flex 元素各消耗 25%
• 三项 = 33.33%
• 两项 = 50%
• 一项 = 100%

任何时候删除一个元素，其他元素都会在他们之间分配可用空间。

另请阅读 flex属性，因为规范提出了以下建议:

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand resets any unspecified components to accommodate common uses.

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

---

引用资料:

• flex-grow property definition ~ MDN
• flex-grow property definition ~ CSS 技巧
• 7.1. The flex-grow Shorthand ~ W3C

---

浏览器支持:

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