两列，当一个隐藏时，另一个展开全宽 [英] Two columns, and when one is hidden, the other expands the full width

问题描述

有一种方法与纯css使2 div占据50％的宽度，然后设置css属性如 display：none 在一个的div，导致另一个占据100％的宽度？

我在寻找一个解决方案，我只需要改变css上的一个

解决方案

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

因此，当一行上有两个元素，他们将占用尽可能多的空间，最终牺牲50/50。但是如果一个元素被删除，另一个会自动消耗剩余的空间。

  .container {display：flex;}。box {flex-grow：1; / *键规则* / 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>  

b

jsFiddle

将 flex-grow：1 （或 flex：1 ）应用于flex

使用 flex-grow：1 ：

• 四个灵活项目每个消耗25％


• 三个项目= 33.33％ li>
  
• 两个项目= 50％


• 一个项目= 100％

同时阅读有关 flex 属性，因为规范提出以下建议： / p>

鼓励作者使用 flex 速记而不是 flex-grow 。

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

---

b $ b

参考资料：

• flex-grow 属性定义〜MDN


• flex-grow 属性定义〜CSS-Tricks


• 7.1。 flex-grow Shorthand 〜W3C

---

浏览器支持：

所有主流浏览器都支持Flexbox， except IE 8& 9 。某些最新的浏览器版本（例如Safari 8和IE10）需要供应商字首 。要快速生成前缀，请使用自动前缀。有关此答案的更多详情。

Is there a way with pure css to make 2 divs take up 50% width, and then setting a css property such as display:none on one of the divs, causes the other to take up 100% width?

I'm looking for a solution where I need to only change css on one of the elements for the other to take up the rest of the space.

解决方案

What you're looking for is the flex-grow property, which tells elements in a flex container to occupy available space.

So when there are two elements on one line, they will take as much space as they can, ultimately compromising 50/50. But if one element is removed, the other will automatically consume the remaining space.

.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

Applying flex-grow: 1 (or flex: 1) to a flex container's children ("flex items") tells them to distribute available space evenly among themselves.

With flex-grow: 1:

• Four flex items consume 25% each
• Three items = 33.33%
• Two items = 50%
• One item = 100%

Anytime an item is removed, the others will distribute the available space among themselves.

Also read about the flex property, as the spec makes the following recommendation:

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}

---

References:

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

---

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to generate prefixes use Autoprefixer. More details in this answer.

这篇关于两列，当一个隐藏时，另一个展开全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！