html - 使用flexbox，如何align-content :stretch work when combined with align-items?

Question

一直在使用 Flexbox，大多数配置似乎都有意义。但对我来说不那么重要的是，如果将 align-content 设置为 stretch (默认选项)，并设置 align-items: center, flex- end，或 flex-start，它不会拉伸(stretch)行，这与我根据从 flexbox w3 网站上看到的图片最初的想法相反。

它为您提供由边距分隔的行。我很好奇为什么/如何确定这些边距，以及为什么 flex 元素不会延伸到其 flex 容器上？

这是一个重现问题的 JSBIN:http://jsbin.com/cehogay/edit?html,css,output

.parent {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
  height: 400px;
  border: solid 5px blue;
  align-items: center;
  align-content: stretch;
}
.child {
  width: 200px;
  font-size: 20px;
  border: solid 2px black;
}

<div class="parent">
  <div class="child">22</div>
  <div class="child">211212</div>
  <div class="child">6666666</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
</div>

Answer 1

Using flexbox, how does align-content:stretch work when combined with align-items?

当您使用单行 Flex 容器 (flex-wrap: nowrap) 时，align-content 不起作用。您可以使用 align-items 和 align-self 来定位 Flex 元素。

当您使用多行柔性容器(flex-wrap:wrap)时，align-content 生效并可用于打包柔性行与 justify-content 在主轴上的工作方式相同。

...how if you set align-content to stretch (default option), and set align-items: center, flex-end, or flex-start, it does not stretch the rows.It instead gives you rows separated by a margin.

这些不是边距。这是 align-content:stretch 的工作原理。此设置采用容器的横轴长度(在本例中为高度)，并在每行之间平均分配该空间。

以下是 align-content 属性的 stretch 规范定义:

stretch

Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

换句话说，横轴上的 align-content:stretch 与主轴上的 flex:1 类似。

如果您从 align-content:stretch 切换到 align-content:flex-start，这些间隙就会消失。

.parent {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
  height: 400px;
  border: solid 5px blue;
  align-items: center;
  align-content: flex-start;
}
.child {
  width: 200px;
  font-size: 20px;
  border: solid 2px black;
}

<div class="parent">
  <div class="child">22</div>
  <div class="child">211212</div>
  <div class="child">6666666</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>

</div>

Why do the flex-items not stretch across its flex-container?

他们确实这么做了。在您的演示中，您可能会看到黑色边框。这些边界不代表线。它们代表 flex 元素。

每行的高度完全相同，因为 align-content:stretch 在每行之间平均分配了容器空间。 (每行的高度由容器的高度除以行数确定。)

当您使用 align-items: flex-start 或 center 或 flex-end 时，您不会更改行高。您正在该行中重新定位 flex 元素。但如果您切换到 align-items:stretch，您将缩小差距。

.parent {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
  height: 400px;
  border: solid 5px blue;
  align-items: stretch;
  align-content: stretch;
}
.child {
  width: 200px;
  font-size: 20px;
  border: solid 2px black;
}

<div class="parent">
  <div class="child">22</div>
  <div class="child">211212</div>
  <div class="child">6666666</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>
  <div class="child">211212</div>

</div>