Align-content center不工作，align-self center工作

Question

最近我一直在学习更多关于flexbox的知识，我只是偶然发现了一些意想不到的行为。

我有一个div，里面有一个header元素:

<div>
<h2> Hello </h2>
</div>

div有

{
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}

我正试图将我的标题水平居中(在交叉轴上)，我的理解是align-content: center会这样做。

然而，它只工作，如果我应用align-self: center头。

知道是什么导致了这种行为吗?我认为柔性项目上的align-content相当于每个孩子上的align-self。为什么只有当我指定align-self时才能工作?

Answer 1

不需要在标题中应用属性，只需在CSS中包含align-items: center;而不是align-content:center，它就会完美地工作。

Answer 2

Flex示例

官方文档

试

flex-direction: row;

或

display: flex;
align-items: center;
justify-content: center