<!-- HTML -->
<body>
<div class="header">
My awesome website
</div>
</body>
/* CSS */
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
我正在尝试使用 Flexbox 模型在 div 内垂直对齐文本“我很棒的网站”。
我对flexbox的理解是，flex容器和flex元素需要分别是父元素和直接子元素。设置 display: flex 将 header div 转换为 Flex 容器，设置 align-items: center 将使 Flex 元素居中。
但是，我注意到“My Awesome website”不需要是 EXPLICIT 子元素，Flexbox 就可以将其视为 Flex 元素并向其应用 Flex 属性。
例如，我认为代码需要如下所示才能应用 Flex 属性:
<!-- HTML -->
<body>
<div class="header">
<div>
My awesome website
</div>
</div>
</body>
Flex 容器和 Flex 元素并不总是需要是显式父元素和直接子元素吗？
最佳答案
Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.
浏览器将为文本创建一个“匿名 block 容器”，这个不可见 block 将成为 flex 元素。
但我强烈建议您手动将文本放入容器中，因为您永远不应该将文本容器设为 Flexbox 容器。
这是一个错误结果的示例:
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
padding-left: 16px;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}<div class="header">
My <strong>awesome</strong> website
</div>
<div class="header">
<div>My <strong>awesome</strong> website</div>
</div>我写了一篇小文章来解释这个小怪癖:https://dev.to/afif/never-make-your-text-container-a-flexbox-container-m9p
关于html - Flex 元素不需要是 Flex 容器内的显式元素吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76665208/