具有不同高度行的 Flex-wrap

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 似乎也被忽略了。

请注意，这个问题特别是关于用 flexbox 包装时的行高。我知道一百万种在 css 和 js 中构建选项卡的不同方法。我特别想深入了解 flex-wrap 。

原文由 George Mauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这不会发生，因为 当 flex 项目包装时，它们只需要包含其内容所需的最小尺寸。

从 flexbox 规范：

6. 弹性线

在多行 flex 容器中（即使只有一行），每行的交叉大小是包含行上的 flex 项目所需的最小大小（对齐后由于 align-self ），并且这些行在 flex 容器内与 align-content 属性对齐。

换句话说，当基于行的弹性容器中有多行时，每行的垂直高度（ “交叉尺寸” ）是 “在该行中包含弹性项目所需的最小尺寸” 。

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果使用 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>

原文由 user4994625 发布，翻译遵循 CC BY-SA 3.0 许可协议