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

概述是否有一种纯css的方法使2个div占用50％的宽度,然后在其中一个div上设置一个css属性,如display：none,导致另一个占用100％的宽度？ 我正在寻找一个解决方案,我只需要在其中一个元素上更改css,以占用剩下的空间. 你正在寻找的是flex-grow属性,它告诉flex容器中的元素占用可用空间. 因此,当一条线上有两个元素时,它们将占用尽可能多的空间,最终会损失50/50.但如果 是否有一种纯CSS的方法使2个div占用50％的宽度,然后在其中一个div上设置一个CSS属性,如display：none,导致另一个占用100％的宽度？

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

解决方法 你正在寻找的是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 >    <div ></div>    <div ></div></div>

jsFiddle

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

随着flex-grow：1：

>四个d性项目每个消耗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: 07002}

参考文献：

> flex-grow property definition~MDN
> flex-grow property definition~css-Tricks
> 7.1. The flex-grow Shorthand~W3C

浏览器支持：

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

总结

以上是内存溢出为你收集整理的html – 两列,当一个被隐藏时,另一列扩展整个宽度全部内容，希望文章能够帮你解决html – 两列,当一个被隐藏时,另一列扩展整个宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。