使用 flexbox 居中元素时的额外空间 [英] extra space when centering elements using flexbox

问题描述

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

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

我的 css 代码类似于:

.flex-container {显示:弹性；弹性方向:行；flex-wrap: 包裹;对齐项目:居中；对齐内容:居中；对齐内容:居中；}

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

所以结果会是这样的:

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

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

* {box-sizing: 边框框；字体大小:1.5rem；}html {背景:#b3b3b3；填充:5px；}身体 {背景:#b3b3b3；填充:5px；边距:0；}.flex 容器 {背景:白色；填充:10px；边框:5px纯黑色；高度:800px；显示:弹性；弹性方向:行；flex-wrap: 包裹;对齐项目:居中；对齐内容:居中；}.item-1 {背景:#ff7300；白颜色;填充:10px；边框:5px纯黑色；边距:10px；}.item-2 {背景:#ff9640；白颜色;填充:10px；边框:5px纯黑色；边距:10px；宽度:250px；/* 字体大小:1.8rem;*/}.item-3 {背景:#ff9640；白颜色;填充:10px；边框:5px纯黑色；边距:10px；高度:250px；}.item-4 {背景:#f5c096；白颜色;填充:10px；边框:5px纯黑色；边距:10px；宽度:300px；高度:300px；}.item-5 {背景:#d3c0b1；白颜色;填充:10px；边框:5px纯黑色；边距:10px；宽度:350px；}.item-6 {背景:#d3c0b1；白颜色;填充:10px；边框:5px纯黑色；边距:10px；宽度:350px；}

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

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

解决方案

align-content

请注意，align-content:stretch 也在此处起作用.

align-content 属性在弹性行之间分配可用空间.它的默认值是 stretch.

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

<小时>

align-items

从容器中移除 align-items: center.然后您会注意到，当项目换行时，行(或行"，在这种情况下)之间没有间隙.

<小时>

align-content 和 align-items 协同工作

恢复align-items: center.现在，当项目换行时，线条之间有明显的间隙.

这是因为 align-items: center 根据 align-content:stretch、item heights 建立的行高，将 item 定位在行的垂直中心, 和项目内容.

行高在这里设置(使用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 等)，您可以打包 flex 行，挤压可用空间，从而消除间隙.

<小时>

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

容器设置为height: 800px.

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

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

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

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

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

这就是第一行更高的原因.

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

<小时>

更多详情:

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

I'm using align-items and justify-content to center the elements, my html is:

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

my css code is something like:

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

(I leave out some unimportant css code.)

so the result will be like:

but if I shrink the browser window, it will be like:

I don't understand why there is so much space between two lines (I know using align-content: center; can fix, but I want to know how those excess space is there in the first place)

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

and if I shrink the browser window more, then there is no such excess space:

解决方案

align-content

Note that align-content: stretch is also in play here.

The align-content property distributes free space among flex lines. It's default value is stretch.

So when your items wrap to two lines, align-content: stretch distributes free space equally across lines.

---

align-items

Remove align-items: center from the container. You'll then notice that when items wrap, there is no gap between lines (or "rows", in this case). demo

Line heights are set by align-content, the height of the items, and the content of the items.

---

align-content and align-items working together

Restore align-items: center. Now when items wrap, there is a visible gap between lines.

This is because align-items: center positions the items in the vertical center of the line, based on line heights established by align-content: stretch, item heights, and item content.

The line heights are set here (with align-content: stretch and align-items: stretch):

... and continue here (with align-content: stretch and align-items: center):

align-items is having no effect on the height of the flex line. That job is andled by align-content.

However, by changing the value of align-content (to flex-start, flex-end, space-between, center, etc.), you pack the flex lines, squeezing out the free space, and hence removing the gaps.

---

Why is the first row taller than the second row with align-content: stretch?

The container is set to height: 800px.

There are two items with defined heights:

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

When .item-5 and .item-6 form the second row, the free space in the container is, in its simplest form, 500px (800px - 300px).

So, in a container with two rows and align-content: stretch, 250px is distributed to the height of each row.

• first row is 300px (defined height) plus 250px (free space)
• second row is 250px (free space)

That's why the first row is taller.

Just note that the free space calculation above is slightly off in the actual layout. That's because there is text in the items, which consumes free space. You can factor in the height of the text to get the precise figures, or remove the text altogether to see the calculations above fall into place.

---

More details:

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

这篇关于使用 flexbox 居中元素时的额外空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！