将flex项目垂直居中 [英] Vertically center flex item in a second column

问题描述

我正在修改使用Flexbox在列表视图中显示的投资组合模块，但是，我无法对Flexbox中我想要的最后一个孩子进行罚款。我觉得这应该可行，也许我的方法有些不对。

我试过包装 .post-tag div放在其自己的flexbox容器中，并使用 margin-left：auto; ，虽然它可以证明我想要的位置，但它并不是我想要的因为在自动保证金占据的所有内容之下都有一个空白。我仍在和其他可能的解决方案一起玩弄JS小提琴。

  .parent {display：flex; flex-direction：column;}。container {display：flex; flex-direction：列;边框底部：固定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>这里的客户< / p> < / div> < h2>这里标题< / h2> < div>此处的字幕< / div> p praesentium和deleniti quodol dolnis dignissimos impedit。 UT temptemp quidem debitis必要的别名culpa。 Delectus sunt pariatur eum autiam quia et quibusdam。 Nemo行使至此。 < p class = post-tag> Post Tag< / p> < / div> < / div> < div class = container> < div class = inner-container> < div> < p>这里的客户< / p> < / div> < h2>这里标题< / h2> < div>此处的字幕< / div> < p" yadayada< / p> < p class = post-tag> Post Tag< / p> < / div> < / div> < div class = container> < div class = inner-container> < div> < p>这里的客户< / p> < / div> < h2>这里标题< / h2> < div>此处的字幕< / div> p praesentium和deleniti quodol dolnis dignissimos impedit。 UT temptemp quidem debitis必要的别名culpa。 Delectus sunt pariatur eum autiam quia et quibusdam。 Nemo行使至此。 < p class = post-tag> Post Tag< / p> < / div> < / div>< / div>  

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

解决方案

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

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

然后，将 .post-tag 垂直居中，使网格区域跨越整列，并应用 align-self：center 到网格项目。

以下是相关代码：

  .inner-container {
 display：grid; 
 grid-template-columns：1fr auto; 
 grid-template-rows：repeat（4，自动）; 
} 
 
 .post-tag {
 grid-column：2; 
网格行：1 / -1; 
 align-self：center; 
} 
  

  .inner-container {display：grid; grid-template-columns：1fr自动； grid-template-rows：repeat（4，auto）; padding：10px;}。post-tag {grid-column：2;网格行：1 / -1;自我定位：居中；字体样式：斜体；}。parent {display：flex; flex-direction：column;}。container {display：flex; flex-direction：列;边框底部：固定1.5px＃4b0fff; flex：1;}  

 < div class = parent > < div class = container> < div class = inner-container> < div> < p>这里的客户< / p> < / div> < h2>这里标题< / h2> < div>此处的字幕< / div> p praesentium和deleniti quodol dolnis dignissimos impedit。 UT temptemp quidem debitis必要的别名culpa。 Delectus sunt pariatur eum autiam quia et quibusdam。 Nemo行使至此。 < p class = post-tag> Post Tag< / p> < / div> < / div> < div class = container> < div class = inner-container> < div> < p>这里的客户< / p> < / div> < h2>这里标题< / h2> < div>此处的字幕< / div> < p" yadayada< / p> < p class = post-tag> Post Tag< / p> < / div> < / div> < div class = container> < div class = inner-container> < div> < p>这里的客户< / p> < / div> < h2>这里标题< / h2> < div>此处的字幕< / div> p praesentium和deleniti quodol dolnis dignissimos impedit。 UT temptemp quidem debitis必要的别名culpa。 Delectus sunt pariatur eum autiam quia et quibusdam。 Nemo行使至此。 < p class = post-tag> Post Tag< / p> < / div> < / div>< / div>  

修订的小提琴演示

有关问题的详细说明设计这种布局时的灵活性和网格的好处，请参见以下文章：使div跨越网格中的两行

I'm modifying a portfolio module that displays in list view with flexbox, however, I'm having trouble finessing the last child in the flexbox where I'd like it. I feel like this should be possible, put perhaps my approach is a bit off.

I've tried wrapping the .post-tag div in it's own flexbox container and using margin-left: auto;, and while it justifies it where I want, it's not exactly what I'm looking for since there's a void underneath everything occupied by the auto-margin. I'm still playing around in a JS fiddle with other potential solutions.

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

As you can see in the fiddle above everything shows in a single column, however, I'd like the last child of the .inner-container to sort of be in a separate column to the right. Please see the screenshot below for a visual of what I'm trying to achieve.

Notice that the tags should be centered relative to the other content to the left and be flexible enough to remain so with multiple tags.

Thanks in advance for any and all responses.

解决方案

I think the simplest and easiest solution uses CSS Grid.

Create a two-column grid with your .post-tag in column two.

Then, to vertically center .post-tag, make the grid area span the entire column, and apply align-self: center to the grid item.

Here's the relevant code:

.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

For a detailed explanation of the problems with flex and benefits of grid when designing this sort of layout, see this post: Make a div span two rows in a grid

这篇关于将flex项目垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！