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>

Slightly easier to play with jsbin

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

请注意，问题是关于使用flexbox包装时的行高。我知道在css和js中构建标签的百万种不同方法。我特别希望更深入地了解flex-wrap。

Answer 1

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

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

这不会发生，因为当弹性项目换行时，它们只占用包含其内容所需的最小大小。

来自flexbox规范：

6. Flex Lines

在多线柔性容器（即使只有一条线的容器）中，   每行的交叉大小是包含该行所必需的最小大小   弹线上的项目（由于align-self对齐后）和   使用align-content在flex容器中对齐线条   属性。

换句话说，当基于行的flex容器中有多行时，每行的垂直高度（“cross size”）是“所需的最小大小包含“。

行上的弹性项目

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

Answer 2

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

您将身体设置为全高，然后告诉该部分增加完整的可用空间，从而填充浏览器高度。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

样本2，使用包装器

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

如果使用calc计算标签的高度来计算标签的高度，我只会看到一个解决方案：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

3 个答案: