我有两个“分割”，如果只有一个存在，则使用 flex-grow 为 100%，如果两者都存在，则为 50%/50%。问题是我希望此行为取决于 div.split 中是否存在内容。
通过一些摆弄，我可以让它适当扩展高度或适当删除内容，但不能同时两者兼而有之。
内容 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>
最佳答案
由于 JSBin 演示填充了视口(viewport)，因此有 2 种解决方案可以解决此问题。
- 内联代码的解决方案，其中
部分未填充视口(viewport)。
您应该使用 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>
部分填充视口(viewport)使用: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>关于html - Flex-grow 取决于子内容的存在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46720496/