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

【问题标题】：How to align one flex item to top of container while others follow justify-content: center? [duplicate]如何将一个弹性项目与容器顶部对齐，而其他项目则遵循 justify-content: center？ [复制]
【发布时间】：2019-06-08 02:34:04
【问题描述】：

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

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 容器的顶部，而其他弹性项目定位在剩余空间的中心？

我尝试在h1 上使用position: absoltute，但该元素不再适合容器。提前感谢您的帮助。

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

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

你已经用你的代码实现了这一点，你只是忘了对齐文本......如果我理解正确你想要什么

【讨论】：

【解决方案2】：

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

<style>
    .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;
    }
</style>
<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>

【讨论】：