我无法理解display: flex

的默认行为

为什么我的header在只添加display: flex时，它的子标头却垂直居中。

我尚未将align-items: center;添加到header。

是因为我为它分配了height: 100px;？

header { display: flex; border: 1px solid black; height: 100px; } header div { display: flex; justify-content: space-between; align-items: center; width: ; max-width: 1224px; margin: 0 auto; } nav a:not(:last-child) { margin-right: 55px; } <header> <div> <a href="#">Link</a> <nav> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> </nav> <a href="#">Link</a> </div> </header>

我知道header有display: flex和align-items: center;，但是为什么父html元素header也需要display: flex让其子元素垂直居中呢？

---

顺晟科技：

它不是垂直对齐header，而是垂直对齐header内部的header。

您的header > div具有display: flex和align-items: center，后者明确告诉header将项与中心对齐。

只有一个孩子的父母不需要display: flex;。 <header>标记具有100px的高度，默认情况下，<div>具有隐式的align-self: stretch;，与height: 类似。要解决您的问题，您有两种选择:

从display: flex;中删除display: flex;。 Asignalign-self: flex-start;到您的<div>。

如果考虑，将这两个选项应用于<div>子级，以获得相同的结果。这个答案的主要关键是：默认情况下，flex容器的所有子容器都有一个隐式align-self: stretch.

当将display: flex应用于父级header时，其子级“伸展”以假定容器的全部高度和宽度，因为默认的align-items属性是stretch。

因此，header的子级现在具有100px的高度，并且内容居中。