Question

一直在使用flexbox，大多数配置似乎都有意义。但是对我来说不是如果你将align-content设置为stretch（默认选项）并设置align-items: center, flex-end, or flex-start，它不会拉伸行，与我相反最初会根据我在flexbox w3网站上看到的图片进行思考。

它会为您提供以边距分隔的行。我很好奇为什么/如何确定这些边距，以及为什么flex-items不会伸展到它的flex-container？

这是一个JSBIN复制问题：http://jsbin.com/cehogay/edit?html,css,output

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用flexbox，align-content:stretch与align-items结合后如何工作？

当您使用单线灵活容器（flex-wrap: nowrap）时，align-content无效。您可以使用align-items和align-self来定位弹性项目。

当您使用多线柔性容器（flex-wrap: wrap）时，align-content生效，可用于以相同的方式打包柔性线justify-content主轴。

...如果将align-content设置为拉伸（默认选项），设置align-items: center，flex-end或flex-start，它不会拉伸行。它改为为您提供以边距分隔的行。

这些不是利润。这是align-content: stretch正在进行中。此设置采用容器的交叉轴的长度（在本例中为高度），并在每行之间平均分配该空间。

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

stretch

拉伸线以占据剩余空间。如果剩余的自由空间为负数，则此值与flex-start相同。否则，自由空间在所有线之间平均分配，增加它们的交叉尺寸。

换句话说，横轴上的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>

为什么flex-items不能伸展到它的flex-container？

他们这样做。在您的演示中，您可能正在查看黑色边框。这些边界不代表线。它们代表弹性项目。

每一行的高度完全相同，因为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>

使用flexbox，align-content：如何与align-items结合使用？

1 个答案: