如何将一个弹性项目与容器顶部对齐，而其他项目则遵循 justify-content: center？ [重复]

Question

我有一个包含两个项目的网格，第一个项目是一个弹性容器。

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

容器的顶部，而其他弹性项目位于剩余空间的中心？

我尝试在

position: absoltute

上使用

h1

，但随后该元素不再正确适合容器。预先感谢您的帮助。

Answer 1

如果你方便的话，你可以将其他div包裹在一个父div中并给它

flex: 1

。

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 100vh;
}

.flex {
  display: flex;
  flex-direction: column;
  background-color: blue;
}

.other-grid-item {
  background-color: yellow;
}

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

<div class="grid">
  <div class="flex">
    <h1>Anchor To Top?</h1>
    
    <div class="content">
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
      <div>item</div>
    </div>
  </div>

  <div class="other-grid-item">
    Other grid item
  </div>
</div>

Answer 2

您已经通过代码实现了这一目标；您只是忘记对齐文本。

.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>