在下面的代码中，如果我在flex-column中注释掉align-items行，则背景为灰色，图标之间存在空格。如果我取消注释align-items，则背景为蓝色，图标居中。
我认为align-items和justify-content彼此正交 - 为什么align-items会影响子弹性箱容器中的弹性箱间距问题？宽度是否从100％开始？
我认为它只会管理它的直接孩子。此外，align-items处于活动状态时整个区域都是蓝色，不应该至少看到图标的背景为灰色？
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
background-color: blue;
}
.flex-row {
display: inline-flex;
flex-direction: row;
justify-content: space-between;
background-color: gray;
} <div class="flex-column">
<div>Some Content0</div>
<div>Some Content1</div>
<div class="flex-row" style='border: solid;'>
<img src="update.svg" style="max-width: 20px;">
<img src="update.svg" style="max-width: 20px;">
</div>
<div>Some Content2</div>
<div>Some Content3</div>
</div>
答案 0 :(得分：2)
父Flex容器设置为列方向。这意味着主轴是垂直的，横轴是水平的。
align-items属性仅适用于横轴。
因此，当您将容器设置为：
时align-items: center
...孩子（.flex-row）水平居中。
基本上，Flex项目两侧的所有可用空间都会被消耗，导致项目居中。
显示父母的背景颜色（蓝色），因为儿童的背景颜色（灰色）已被挤压到中心，位于图像后面。
当您在父级上禁用align-items: center时，会在子级上恢复默认的stretch值。
与其父级不同，子级（.flex-row）是行方向容器。所以主轴是水平的，横轴是垂直的。
justify-content属性仅适用于主轴。因此，在这种情况下，它与父项上的align-items的工作方向相同。
子容器上有justify-content: space-between而父容器上有align-items: stretch，图像和子灰色背景颜色可以访问容器的整个长度。
宽度是否从100％开始？
通常，是的。但无论如何，你已经用中心覆盖了全长。
也许您认为只有内容（图像）应该居中而不是灵活项目。这并不完全是如何运作的。 Flex容器中有三个独立的级别：
这里有一个更完整的解释（它主要关注Grid，但这些概念也适用于flex）：
在此处了解有关主轴的柔性对齐的更多信息：
在此处了解有关十字轴的柔性对齐的更多信息：
答案 1 :(得分：1)
在 flex列容器上$ git status
On branch feature/xyz
Your branch is ahead of 'origin/feature/xyz' by 568 commits.
(use "git push" to publish your local commits)
Untracked files:
(use "git add <file>..." to include in what will be committed)
.idea/codeStyles/
影响横轴（水平），并使用其默认值align-items，使其弹性项填充其宽度（100％宽）。
当您将其更改为stretch时，它将是控制是否填充其父级宽度的项目宽度，并且由于您的父级不宽，因此就像你告诉他们的那样（center），中心很好。