具有不同高度行的柔性包裹

Question

我正在实现带有哈希标记链接的仅css选项卡。我离得很近，但无法使柔性包装正常工作。为了让一切都能以我希望的方式与:target一起工作(我以前用单选按钮做过这件事，这给了我更多的灵活性)，我需要所有选项卡和所有部分处于同一级别，所以我有：

body
section
anchor
section
anchor
...

然后，我可以使用flexbox排序使所有锚首先出现，并适当地设置样式，将所有部分设置为100%宽度，并使用flex-wrap允许它们换行到下一行。问题是我似乎无法控制第一排的高度。这是怎么回事？

body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
height: 100vh;
outline: 1px solid green;
}
body > a {
padding: 10px;
margin: 0 5px;
order: -1;
flex-grow: 0;
border: solid gray;
border-width: 1px 1px 0 1px;
}
body > a:last-of-type {
order: -2;
}
section {
flex-grow: 1;
width: 100%;
background-color: cornsilk;
display: none;
border-top: 1px solid grey;
}
section:last-of-type {
display: flex;
}
a {
font-weight: normal;
}
a:last-of-type {
font-weight: bold;
}
:target {
display: flex;
}
:target ~ section {
display: none;
}
:target ~ a {
font-weight: normal;
}
:target + a {
font-weight: bold;
}

<section id="advanced">
	Advanced Stuff
</section>
<a href="#advanced">Advanced</a>
<section id="home">
	Home Things
</section>
<a href="#home">Home</a>

使用jsbin 稍微容易一些

问题是第一行中的选项卡会延伸到可见部分的高度，而不是折叠到其内容的高度。即使是特定的height和max-height似乎也被忽略了。

请注意，这个问题特别是关于使用柔性盒包装时的线高度。我知道用css和js构建选项卡的无数种不同方法。我特别想对flex-wrap有更深入的了解。

Answer 1

flex容器的两个初始设置是align-items: stretch和align-content: stretch。您可以通过将值更改为flex-start来覆盖此项。

但这似乎只解决了部分问题。您还希望选定的包装项目拉伸容器的整个高度。

之所以没有发生这种情况，是因为当flex项目包装时，它们只需要包含其内容所需的最小大小

来自flexbox规范：

6.弹性线

在多行柔性容器(即使是只有单行的容器)中每条线的交叉大小是包含行上的弹性项目(由于align-self而对齐后)，以及线条在具有align-content的柔性容器内对齐所有物

换句话说，当一个基于行的柔性容器中有多行时，每行的垂直高度("十字大小">)是"包含行上柔性项所需的最小大小">。

要使布局正常工作，您需要行和列方向的flex容器的组合，以及对HTML的调整。

Answer 2

从body移除height: 100vh，从section移除flex-grow: 1;

实际情况是，将主体设置为全高，然后告诉部分增加全部可用空间，从而填充浏览器高度。

body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
outline: 1px solid green;
}
body > a {
padding: 10px;
margin: 0 5px;
order: -1;
flex-grow: 0;
border: solid gray;
border-width: 1px 1px 0 1px;
}
body > a:last-of-type {
order: -2;
}
section {
width: 100%;
background-color: cornsilk;
display: none;
border-top: 1px solid grey;
}
section:last-of-type {
display: flex;
}
a {
font-weight: normal;
}
a:last-of-type {
font-weight: bold;
}
:target {
display: flex;
}
:target ~ section {
display: none;
}
:target ~ a {
font-weight: normal;
}
:target + a {
font-weight: bold;
}

<section id="advanced">
	Advanced Stuff
</section>
<a href="#advanced">Advanced</a>
<section id="home">
	Home Things
</section>
<a href="#home">Home</a>

样品2，使用包装

body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
outline: 1px solid green;
height: 100vh;
}
body > div {
flex: 0;
order: 1;
}
section {
flex: 1;
background-color: cornsilk;
display: none;
border-top: 1px solid grey;
order: 2;
}
body > div > a {
display: inline-block;
padding: 10px;
margin: 0 5px;
border: solid gray;
border-width: 1px 1px 0 1px;
}
section:last-of-type {
display: flex;
}
a {
font-weight: normal;
}
a:first-of-type {
font-weight: bold;
}
:target {
display: flex;
}
:target ~ section {
display: none;
}
:target ~ div a {
font-weight: normal;
}
#home:target ~ div a[href='#home'],
#advanced:target ~ div a[href='#advanced'] {
font-weight: bold;
}

<section id="advanced">
	Advanced Stuff
</section>
<section id="home">
	Home Things
</section>
<div>
<a href="#home">Home</a>
<a href="#advanced">Advanced</a>
</div>

Answer 3

只有当使用calc计算截面高度时选项卡的高度已知时，我才能看到解决方案：

body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
margin: 0;
padding: 0;
height: 100vh;
}
body > a {
padding: 0 10px;
margin: 0 5px;
order: -1;
flex: 0 1 auto;
border: solid gray;
border-width: 1px 1px 0 1px;
line-height: 30px;
}
body > a:last-of-type {
order: -2;
}
section {
flex: 0 1 100%;
background-color: cornsilk;
display: none;
border-top: 1px solid grey;
height: calc(100% - 32px)
}
section:last-of-type {
display: block;
}
a {
font-weight: normal;
}
a:last-of-type {
font-weight: bold;
}
:target {
display: block;
}
:target ~ section {
display: none;
}
:target ~ a {
font-weight: normal;
}
:target + a {
font-weight: bold;
}

<section id="advanced">
Advanced Stuff
</section>
<a href="#advanced">Advanced</a>
<section id="home">
Home Things
</section>
<a href="#home">Home</a>