gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:18:03 29 4
gpt4 key购买 nike

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

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

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

JS Bin Code Snippet

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 个解决方案可以解决这个问题。

  1. 内联代码的解决方案,其中 section 没有填充视口(viewport)。

你应该使用flex-grow: 1;,而不是flex: 1,与flex: 1一样,这与flex: 1 1 0flex-basis 为 0,当 flex items 将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>


  1. JSBin 的解决方案,其中 部分 填充视口(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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com