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

问题描述

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

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>

我的CSS代码类似于:

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

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

(I leave out some unimportant css code.)

所以结果将是:

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

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

我不明白为什么两行之间有这么大的空间(我知道使用align-content: center;可以解决，但是我想首先知道那些多余的空间)

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

请注意，align-content: stretch也在这里播放.

align-content

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

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

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

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

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

从容器中删除align-items: center.然后，您会注意到，在包装项目时，行之间没有间隙(在这种情况下为行"). 演示

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

行高由align-content，项目的高度和项目的内容设置.

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

还原align-items: center.现在，当物品包装好时，线之间有一个可见的间隙.

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

这是因为align-items: center根据align-content: stretch确定的行高，项目高度和项目内容将项目定位在行的垂直中心.

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.

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

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

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

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

align-items对柔线的高度没有影响.该工作由align-content负责.

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

但是，通过更改align-content的值(更改为flex-start，flex-end，space-between，center等)，可以打包伸缩线，挤压出可用空间，然后删除差距.

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.

容器设置为height: 800px.

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

There are two items with defined heights:

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

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

当.item-5和.item-6形成第二行时，容器中的自由空间以其最简单的形式为500px(800px-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).

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

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

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

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

That's why the first row is taller.

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

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

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

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