用不同高度的行进行柔性包装 [英] Flex-wrap with rows of different heights

问题描述

我正在实现带有散列标签链接的仅css选项卡。我非常接近，但不能让柔性包装正常工作。为了一切工作，他们的方式我希望它与：目标（我以前做过这个单选按钮，这给了更多的灵活性），我需要所有所以我有：

  body 
 section 
 anchor 
部分
 anchor 
 ... 
  

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

body {display：flex; flex-direction：row; flex-wrap：wrap;保证金：0;填充：0;身高：100vh;大纲：1px纯绿色;}身体> {padding：10px;保证金：0 5px;顺序：-1; flex-grow：0;边框：纯灰色; border-width：1px 1px 0 1px;} body> a：last-of-type {order：-2;} section {flex-grow：1;宽度：100％; background-color：cornsilk;显示：无border-top：1px solid gray;} 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>

$ b

使用jsbin稍微简单一点 p>

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

请注意，这个问题是关于使用flexbox包装时的线条高度。我知道有一百万种不同的方法来在CSS和JS中构建标签。我正在寻找对 flex-wrap 的深入理解。 p> Flex容器的两个初始设置是 align-items：stretch 和 align-content：stretch 。你可以通过将值改为 flex-start 。

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

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

从flexbox spec：

lockquote

6。 Flex行

在一个多行的flex容器（甚至只有一行的行）中，
的交叉大小每行都是包含
flex项目所需的最小大小（在 align-self 之后），
行是使用 align-content
属性在flex容器中对齐。

<换句话说，当一个基于行的flex容器中有多行时，每行的垂直高度（cross size ）是包含所需的最小大小为了使你的布局工作，你需要一个行方向和列方向的flex容器的组合，以及一个行方向的flex方向的元素。。调整到HTML。

I am implementing css-only tabs with hash-tag linking. I'm very very close but can't quite get the flex wrapping to work properly. In order for everything to work they way I want it to with :target (I've done this before with radio buttons and that gives a bit more flexibility), I need all tabs and all sections at the same level so I have:

body
  section
  anchor
  section
  anchor
  ...

I can then use flexbox ordering to make all anchors appear first and style the appropriately, set all sections to width 100% and use flex-wrap to allow them to wrap to the next line. The problem is that I seem to be unable to control the height of the first row. What's going on here?

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

The issue is that the tabs in the first row stretch to the height of the visible section rather than collapsing to the height of their contents. Even a specific height and max-height seems to be ignored.

Please note, the question is specifically about line heights when wrapping with flexbox. I know a million different ways to build tabs both in css and js. I'm specifically looking for a deeper understanding of flex-wrap.

解决方案

Two initial settings of a flex container are align-items: stretch and align-content: stretch. You can override this by changing the value to flex-start.

But that seems to solve only part of the problem. You also want selected wrapping items to stretch the full height of the container.

This isn't happening because when flex items wrap they take only the minimum size necessary to contain their content.

From the flexbox spec:

6. Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.

In other words, when there are multiple lines in a row-based flex container, the vertical height of each line (the "cross size") is the "minimum size necessary to contain the flex items on the line".

To make your layout work you would need a combination of row- and column-direction flex containers, along with an adjustment to the HTML.

这篇关于用不同高度的行进行柔性包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！