<分区>
<分区>
我有一个包含两项的网格，第一项是 flex 容器。
html:
<div class = "grid">
<div class="flex">
<h1>Anchor To Top?</h1>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</div>
<div class = "other-grid-item">
Other grid item
</div>
</div>
CSS:
.grid{
display: grid;
grid-template-columns: 1fr 2fr;
height: 100vh;
}
.flex{
display: flex;
flex-direction: column;
justify-content: center;
background-color: blue;
}
您可以在此处查看示例:https://jsfiddle.net/tc9kdhb1/3/ .有没有一种方法可以让 h1 保持在 flex 容器的顶部，而其他 flex 元素则位于剩余空间的中心？
我尝试在 h1 上使用 position: absoltute，但该元素不再适合容器。在此先感谢您的帮助。
最佳答案
.grid{
display: grid;
grid-template-columns: 1fr 2fr;
height: 100vh;
}
.flex{
display: flex;
flex-direction: column;
justify-content: center;
background-color: blue;
}
.item{
text-align:center;
}<div class = "grid">
<div class="flex">
<h1>Anchor To Top?</h1>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class = "other-grid-item">
Other grid item
</div>
</div>你已经用你的代码实现了这一点，你只是忘记了对齐文本......如果我理解正确的话
关于css - 如何将一个 flex 元素对齐到容器顶部，而其他元素遵循 justify-content : center?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56499456/