html - 使用 flexbox 居中元素时的额外空间

Question

我正在使用 align-items 和 justify-content 来居中元素，我的 html 是:

<div class="flex-container">
    <div class="item-1">div</div>
    <div class="item-2">w=250px</div>
    <div class="item-3">h=250px</div>
    <div class="item-4">w/h=300px</div>
    <div class="item-5">w=350px</div>
    <div class="item-6">w=350px</div>
</div>

我的 CSS 代码是这样的:

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

(我省略了一些不重要的 css 代码。)

所以结果会是这样的:

但是如果我缩小浏览器窗口，它会是这样的:

我不明白为什么两行之间有这么多空间(我知道使用 align-content: center; 可以修复，但我想知道那些多余的空间是如何出现在第一名)

* {
  box-sizing: border-box;
  font-size: 1.5rem;
}

html {
  background: #b3b3b3;
  padding: 5px;
}

body {
  background: #b3b3b3;
  padding: 5px;
  margin: 0;
}

.flex-container {
  background: white;
  padding: 10px;
  border: 5px solid black;
  height: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.item-1 {
  background: #ff7300;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
}

.item-2 {
  background: #ff9640;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 250px;
  /* font-size: 1.8rem; */
}

.item-3 {
  background: #ff9640;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  height: 250px;
}

.item-4 {
  background: #f5c096;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 300px;
  height: 300px;
}

.item-5 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 350px;
}

.item-6 {
  background: #d3c0b1;
  color: white;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  width: 350px;
}

<div class="flex-container">
  <div class="item-1">div</div>
  <div class="item-2">w=250px</div>
  <div class="item-3">h=250px</div>
  <div class="item-4">w/h=300px</div>
  <div class="item-5">w=350px</div>
  <div class="item-6">w=350px</div>
</div>

如果我进一步缩小浏览器窗口，那么就没有多余的空间了:

Answer 1

对齐内容

请注意，align-content: stretch 也在此处发挥作用。

align-content 属性在 flex 行之间分配空闲空间。它的默认值为 stretch。

因此，当您的元素换行成两行时，align-content: stretch 会跨行平均分配可用空间。

---

对齐项

从容器中移除 align-items: center。然后您会注意到，当元素换行时，行(或“行”，在本例中)之间没有间隙。 demo

行高由 align-content、元素的高度和元素的内容设置。

---

align-content 和 align-items 协同工作

恢复 align-items: center。现在，当元素换行时，行与行之间有一个可见的间隙。

这是因为 align-items: center 根据 align-content: stretch 建立的行高将元素定位在行的垂直中心，元素高度, 和元素内容。

行高在这里设置(使用align-content: stretch 和align-items: stretch):

... 并在此处继续(使用 align-content: stretch 和 align-items: center):

align-items 对 flex 行的高度没有影响。该工作由 align-content 领导。

但是，通过改变align-content的值(到flex-start，flex-end，space-between 、center 等)，您打包 flex 行，挤出可用空间，从而消除间隙。

---

为什么第一行比第二行高 align-content: stretch？

容器设置为高度:800px。

有两个元素定义了高度:

• .item-3 { height: 250px }
• .item-4 { height: 300px }

当 .item-5 和 .item-6 形成第二行时，容器中的可用空间最简单的形式是 500px(800px - 300px ).

因此，在具有两行和 align-content: stretch 的容器中，每行的高度分配了 250px。

• 第一行是 300px(定义的高度)加上 250px(自由空间)
• 第二行是 250px(可用空间)

这就是第一行较高的原因。

请注意，上面的可用空间计算在实际布局中略有偏差。那是因为元素中有文本，占用了可用空间。您可以考虑文本的高度以获得精确的数字，或者完全删除文本以查看上面的计算是否正确。

---

更多详情:

• How does flex-wrap work with align-self, align-items and align-content?
• Equal height rows in a flex container