Flex-grow 依赖于子内容的存在

Question

我有两个使用 flex-grow 的“拆分”，如果只有一个，则为 100%，如果两者都存在，则为 50%/50%。 问题是我希望这种行为取决于div.split s 中内容的存在。

通过一些摆弄，我可以让它做适当的扩展高度或适当地删除内容，但不能同时进行。

内容 DOM 结构确实需要保持不变。 如果需要，也许添加一个额外的包装器就可以了。 如果可能，我正在尝试使用纯 CSS 解决方案来解决此问题。

CSS：

body {
  border: 1px solid black;
  display: flex;
  width: 100vw;
}

section {
  display: flex;
  flex-direction: column;
  width: 100vw;
}

.split {
  width: 100vw;
  display: flex;
  flex: 1;
}

.content {
  /* probably something here? */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
  nav { background-color: steelblue; }

HTML：

<body>
  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>
</body>

Answer 1

当 JSBin 演示填满视口时，有两种解决方案可以解决这个问题。

内联代码的解决方案，其中该section未填充视口。

你应该使用flex-grow: 1; , 不是flex: 1 ，与flex: 1一样，与flex: 1 1 0 ， flex-basis为 0，当 flex 项目将根据其内容flex-grow为 0 时，因此取相等空间。

或者，您可以使用flex: 1 1 auto 。

源代码： https : //www.w3.org/TR/css-flexbox-1/#flex-common

堆栈片段 - 包含内容

 body { border: 1px solid black; box-sizing: border-box; display: flex; } section { display: flex; flex-direction: column; width: 100%; } .split { display: flex; flex-grow: 1; /* or "flex: 1 1 auto" */ } /*-------------- Non pertinent styles -----------------*/ .pink { text-align: center; background-color: pink; } .blue { text-align: center; background-color: turquoise; } nav { background-color: steelblue; }

 <section> <div class="split pink"> <!-- If I remove this <h1> I would like for the behavior to be the same as if I removed this .pink.split div from the DOM --> <h1 class="content">A</h1> </div> <nav> Some Nav </nav> <div class="split blue"> <h2 class="content">B</h2> </div> </section>

堆栈片段 - 没有内容

 body { border: 1px solid black; box-sizing: border-box; display: flex; } section { display: flex; flex-direction: column; width: 100%; } .split { display: flex; flex-grow: 1; /* or "flex: 1 1 auto" */ } /*-------------- Non pertinent styles -----------------*/ .pink { text-align: center; background-color: pink; } .blue { text-align: center; background-color: turquoise; } nav { background-color: steelblue; }

 <section> <div class="split pink"> <!-- If I remove this <h1> I would like for the behavior to be the same as if I removed this .pink.split div from the DOM --> </div> <nav> Some Nav </nav> <div class="split blue"> <h2 class="content">B</h2> </div> </section>

JSBin 的解决方案，其中section填充视口

使用:empty选择器，当split为空时，将其更改为flex: 0 。

堆栈片段 - 包含内容

 body { border: 1px solid black; box-sizing: border-box; display: flex; margin: 0; height: 100vh; } section { display: flex; flex-direction: column; width: 100%; } .split { display: flex; flex: 1; } .split:empty { flex: 0; } /*-------------- Non pertinent styles -----------------*/ .pink { text-align: center; background-color: pink; } .blue { text-align: center; background-color: turquoise; } nav { background-color: steelblue; }

 <section> <div class="split pink"> <!-- If I remove this <h1> I would like for the behavior to be the same as if I removed this .pink.split div from the DOM --> <h1 class="content">A</h1> </div> <nav> Some Nav </nav> <div class="split blue"> <h2 class="content">B</h2> </div> </section>

堆栈片段 - 没有内容

 body { border: 1px solid black; box-sizing: border-box; display: flex; margin: 0; height: 100vh; } section { display: flex; flex-direction: column; width: 100%; } .split { display: flex; flex: 1; } .split:empty { flex: 0; } /*-------------- Non pertinent styles -----------------*/ .pink { text-align: center; background-color: pink; } .blue { text-align: center; background-color: turquoise; } nav { background-color: steelblue; }

 <section> <div class="split pink"></div> <nav> Some Nav </nav> <div class="split blue"> <h2 class="content">B</h2> </div> </section>

Flex-grow 依赖于子内容的存在

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-10-13 15:57:51

Flex-grow 依赖于子内容的存在

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-10-13 15:57:51

解决方案1
2 已采纳 2017-10-13 15:57:51