html - 在第二列中垂直居中 flex 元素

Question

我正在使用 flexbox 修改在 ListView 中显示的投资组合模块，但是，我无法将 flexbox 中的最后一个子项设置到我想要的位置。我觉得这应该是可能的，也许我的方法有点偏离。

我试过将 .post-tag div 包装在它自己的 flexbox 容器中并使用 margin-left: auto;，同时它在我想要的位置证明了它的合理性，这并不是我要找的东西，因为自动边距占据的所有内容下面都有一个空白。我仍在使用 JS 摆弄其他可能的解决方案。

.parent {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  border-bottom: solid 1.5px #4b0fff;
  flex: 1;
}

.inner-container {
  padding: 10px;
}

.post-tag {
  font-style: italic;
}

<div class="parent">
  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div>Subtitle Here</div>
      <p>Sint praesentium et deleniti quod dolore dignissimos impedit. Ut autem tempore quidem debitis necessitatibus alias culpa. Delectus sunt pariatur eum aut aperiam quia et quibusdam. Nemo exercitationem iusto consequatur.</p>
      <p class="post-tag">Post Tag</p>
    </div>
  </div>

  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div>Subtitle Here</div>
      <p>yadayada</p>
      <p class="post-tag">Post Tag</p>
    </div>
  </div>

  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div>Subtitle Here</div>
      <p>Sint praesentium et deleniti quod dolore dignissimos impedit. Ut autem tempore quidem debitis necessitatibus alias culpa. Delectus sunt pariatur eum aut aperiam quia et quibusdam. Nemo exercitationem iusto consequatur.</p>
      <p class="post-tag">Post Tag</p>
    </div>
  </div>
</div>

https://jsfiddle.net/7nLjwm65/2/

正如您在上面的 fiddle 中看到的，所有内容都显示在一个单独的列中，但是，我希望 .inner-container 的最后一个子项在一​​个单独的列中正确的。请查看下面的屏幕截图，以直观地了解我要实现的目标。

请注意，标签应相对于左侧的其他内容居中，并且要足够灵活以保持多个标签的位置。

提前感谢您的所有回复。

Answer 1

我认为最简单的解决方案是使用 CSS Grid。

用您的 .post-tag 创建一个两列网格在第二列。

然后，垂直居中.post-tag ，使网格区域横跨整列，应用align-self: center到网格元素。

相关代码如下:

.inner-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(4, auto);
}

.post-tag {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

.inner-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(4, auto);
  padding: 10px;
}

.post-tag {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  font-style: italic;
}

.parent {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  border-bottom: solid 1.5px #4b0fff;
  flex: 1;
}

<div class="parent">
  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div>Subtitle Here</div>
      <p>Sint praesentium et deleniti quod dolore dignissimos impedit. Ut autem tempore quidem debitis necessitatibus alias culpa. Delectus sunt pariatur eum aut aperiam quia et quibusdam. Nemo exercitationem iusto consequatur.</p>
      <p class="post-tag">Post Tag</p>
    </div>
  </div>

  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div>Subtitle Here</div>
      <p>yadayada</p>
      <p class="post-tag">Post Tag</p>
    </div>
  </div>

  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div>Subtitle Here</div>
      <p>Sint praesentium et deleniti quod dolore dignissimos impedit. Ut autem tempore quidem debitis necessitatibus alias culpa. Delectus sunt pariatur eum aut aperiam quia et quibusdam. Nemo exercitationem iusto consequatur.</p>
      <p class="post-tag">Post Tag</p>
    </div>
  </div>
</div>

revised fiddle demo

有关在设计此类布局时 flex 的问题和网格的好处的详细解释，请参阅此帖子:Make a div span two rows in a grid