用不同高度的行进行自动换行

Question

我正在实现带有散列标签链接的css-only选项卡。我非常接近，但无法让柔性包装正常工作。为了一切工作，他们的方式我希望它与: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"> 
 
\t Advanced Stuff 
 
</section> 
 
<a href="#advanced">Advanced</a> 
 

 
<section id="home"> 
 
\t Home Things 
 
</section> 
 
<a href="#home">Home</a>

Slightly easier to play with jsbin

的问题是，在第一行拉伸的可见部分，而不是崩溃到其内容的高度高度的标签。即使一个特定的height和max-height似乎被忽略。

请注意，这个问题是特别为约行高度与Flexbox的包裹时。我知道有一百万种不同的方式可以在css和js中构建标签。我特别想要更深入地了解flex-wrap。

Answer 1

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

，但似乎解决了问题的一部分。您还希望选定的包装物品可以拉伸容器的整个高度。

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

从Flexbox的规格：

6. Flex Lines

在多线柔性容器（甚至仅与单个线），每行的 横尺寸是必要的最小尺寸以在线上包含 弹性物品（在对齐归因于align-self之后），并且 线在弹性容器中与align-content 属性对齐。

换言之，当存在多行中基于行的柔性容器，每个线（“交叉大小”）的垂直高度是“最小尺寸必须含有柔性物品在线“。

为了使您的布局工作，您将需要结合行和列方向flex容器，以及对HTML的调整。

Answer 2

从section

会发生什么事是你定身是全高度，然后告诉部分增长全部可用空间取下body和flex-grow: 1;的height: 100vh，因此，他们填补了浏览器的高度。

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"> 
 
\t Advanced Stuff 
 
</section> 
 
<a href="#advanced">Advanced</a> 
 

 
<section id="home"> 
 
\t 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"> 
 
\t Advanced Stuff 
 
</section> 
 

 
<section id="home"> 
 
\t 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>