Question

具体来说，我想在下面的示例中知道为什么将height值设置为第一个弹性项目会更改（实际上增加）第一行的高度。

通常，我希望能够确定行的高度（我想将flex-container的高度设置为auto或一个明确的值）。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  height: 60px;
}

.flex-container> :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container> :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container> :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container> :nth-child(5) {
  background-color: darkcyan;
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

Answer 1

flex容器的初始设置为align-content: stretch。这意味着弯曲线（即“行”或“列”）将相等地扩展容器的横轴。这就是当您没有在项目上设置任何高度时得到的：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  /* height: 60px; */
}

.flex-container > :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
  background-color: darkcyan;
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

在具有height: 200px和align-items: stretch的容器中，两行上的flex项目的高度均为100px。

在弹性项目上设置高度时，您正在消耗可用空间。仅将剩余空间纳入align-content: stretch中。

因此，在该问题中，第一项为height: 60px。这样在十字轴上会留下140px的可用空间，对吗？好吧，让我们开始吧。该空间在两行之间平均分配。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  height: 60px;
}

.flex-container > :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
  background-color: darkcyan;
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

在这一点上，我们应该看到项目2、3和4的高度为130px，项目5的高度为70px。（第1项不参与，因为align-items: stretch不再适用。它已被高度声明（full explanation覆盖）。）

但事实并非如此。第一行的参与项目的高度为121px，第二行的参与项目的高度为79px。

为什么？因为那里的可用空间比原先想象的要少。内容本身（文本）具有高度并占用空间。一旦您考虑了文字的高度（无论如何，我都不知道），这些数字就会加起来。

实际上，在第一个示例（第一个项目中没有定义高度的高度）中，柔线的高度相等的唯一原因是所有文本都具有相同的字体大小。如果要更改项目＃5的字体大小，则柔线的高度将再次不相等。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  align-items: stretch;
}

.flex-container> :nth-child(1) {
  background-color: darkorchid;
  /* height: 60px; */
}

.flex-container > :nth-child(2) {
  background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
  background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
  background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
  background-color: darkcyan;
  font-size: 2em; /* demo */
}

<div class="flex-container">
  <span>I am number 1</span>
  <div>I am number 2</div>
  <div>I am number 3</div>
  <div>I am number 4</div>
  <span>I am number 5</span>
</div>

更多详细信息：

Answer 2

.flex-container {
        
        display: flex;
        flex-wrap: wrap;
        width: 400px;
        height: 200px;
        border: 1px solid black;
        align-items: stretch;
}

.flex-container > :nth-child(1) {
        background-color: darkorchid;
        height: 100%;   
}

.flex-container > :nth-child(2) {
        background-color: darkkhaki;
}

.flex-container > :nth-child(3) {
        background-color: dodgerblue;
}

.flex-container > :nth-child(4) {
        background-color: darkgoldenrod;
}

.flex-container > :nth-child(5) {
        background-color: darkcyan;
        height: 100%;
}

 <div class="flex-container">
      <span>I am number 1</span>
      <div>I am number 2</div>
      <div>I am number 3</div>
      <div>I am number 4</div>
      <span>I am number 5</span>
</div>

Answer 3

正在设置flex-wrap: wrap。当您在容器中添加各种宽度和高度的元素时，可能会导致Flex容器出现非常意外的行为。因此，将新项目添加到flex-container时，很难获得第一行的高度。

在您的代码中，flex-container的特定高度为200px，宽度为400px。这意味着，无论伸缩容器包含多少元素，它都不会溢出给定的宽度和高度。 flex容器中的每个项目都将尝试覆盖可用空间。

由于align-items: stretch，每行的高度都将是具有最大高度的元素。因此，设置一项的高度可能并不总是会影响行的高度。

如何确定一行的高度？

3 个答案: