<分区>
<分区>
我想将 flex 容器的内容定位在横轴的中心。据我所知，“align-items”会做到这一点，但是要使“align-items”起作用，我们需要明确指定高度。我说得对吗？
好吧，我明确指定了高度，但是在包含 flex 容器的“header” block 级元素上。不过，flex 容器似乎并不关心 block 容器。为什么会这样？ flex 容器是否从正常流程中移除？
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.header {
background: orchid;
height: 100px;
}
.flex-container-1 {
display: flex;
align-items: center; /* this doesn't seem to work */
/* unless I specify the height on the
flex container itself */
}<header class="header">
<div class="flex-container-1">
Flex Container 1
</div>
</header>最佳答案
你应该给 height:100%; 给 .flex-container-1
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.header {
background: orchid;
height: 100px;
}
.flex-container-1 {
display: flex;
align-items: center;
height:100%;
}<header class="header">
<div class="flex-container-1">
Flex Container 1
</div>
</header>关于css - 为什么 Flex 容器不关心它的父 block 级元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54865810/