使用不同高度的行进行柔性包装

Question

我正在使用hash-tag链接实现仅限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.

Answer 1

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

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

这种情况不会发生,因为当Flex项目换行时,它们只占用包含其内容所需的最小大小.

来自flexbox规范:

6.弹性线

在多线柔性容器(即使只有一条线的容器)中,每条线的交叉尺寸是在线上包含柔性项目所需的最小尺寸(在对齐之后align-self),并且线条在flex align-content 属性的容器.

换句话说,当基于行的flex容器中有多行时,每行的垂直高度("交叉大小")是"在行上包含弹性项所需的最小大小".

要使布局工作,您需要结合行方向和列方向的Flex容器,以及对HTML的调整.