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

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

该align-content属性在柔性线之间分配可用空间。它的默认值为stretch.

因此，当您的项目换行为两行时，align-content: stretch请在各行之间平均分配可用空间。

align-items

align-items: center从容器中取出。然后您会注意到，当项目换行时，行（在本例中为“行”）之间没有间隙。演示

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对柔性线的高度没有影响。这项工作是由 领导的align-content。

align-content但是，通过更改（更改为flex-start、flex-end、space-between、等）的值center，您可以压缩柔性线，挤出可用空间，从而消除间隙。

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

容器设置为height: 800px.

有两个具有定义高度的项目：

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

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

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

• 第一行是 300px（定义高度）加上 250px（可用空间）
• 第二行是 250px（可用空间）

这就是为什么第一排更高。

请注意，上面的可用空间计算与实际布局略有偏差。这是因为项目中有文本，这会消耗可用空间。您可以考虑文本的高度以获得精确的数字，或者完全删除文本以查看上面的计算是否正确。

更多细节：

• flex-wrap 如何与align-self、align-items 和align-content 配合使用？
• 弹性容器中的等高行