在第二列中垂直居中弹性项目

Question

我正在使用 flexbox 修改在列表视图中显示的投资组合模块，但是，我无法将 flexbox 中的最后一个子元素调整到我想要的位置。我觉得这应该是可能的，也许我的做法有点不对。

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

.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 网格。

在第二列中使用您的 .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 的问题和网格的好处的详细说明，请参阅此 post：

Answer 2

实现您想要的方法需要更改标记。我把内容放在它自己的容器里，这样它就可以单独控制了。我还为 .tag-post 元素使用了 flex-basis，这样您就可以控制宽度。希望这就是您要找的。

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

.container {
  display: flex;
  flex-direction: row;

  border-bottom: solid 1.5px #4b0fff;
  flex: 1;
}

.inner-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.align-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.post-tag-parent {
  display: flex;
  flex-basis: 30%; /* adjust as needed */
  justify-content: center;
}

.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 class="align-parent">
        <div class="content-parent">
          <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>
        </div>
        <div class="post-tag-parent">
          <p class="post-tag">Post Tag</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div class="align-parent">
        <div class="content-parent">
          <div>Subtitle Here</div>
          <p>yadayada</p>
        </div>
        <div class="post-tag-parent">
          <p class="post-tag">Post Tag</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="inner-container">
      <div>
        <p>Client Here</p>
      </div>
      <h2>Title Here</h2>
      <div class="align-parent">
        <div class="content-parent">
          <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>
        </div>
        <div class="post-tag-parent">
          <p class="post-tag">Post Tag</p>
        </div>
      </div>
    </div>
  </div>
</div>

在第二列中垂直居中弹性项目

Vertically center flex item in a second column

html

css

centering

flexbox