Vertically center flex item in a second column

Question

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.

Michael Benjamin · Accepted Answer · 2019-09-10T19:40:17.780

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

Thank you for your response Michael_B. This is super close, but I'm trying to get the `.post-tag` centered in the second column. So far I tried getting rid of the grid-row in hopes that it would be able to move freely in the column, then i added a `margin: auto 0` under this pretense hoping that it would center it in the column, but no luck with that. Gonna keep playing around with it. — ijome, Sep 10 '19 at 17:22
Answer revised. Now the `.post-tag` can move freely in the column. Also, to understand why your attempts didn't work, see this post: [Aligning grid items across the entire row/column (like flex items can)](https://stackoverflow.com/q/50234112/3597276) — Michael Benjamin, Sep 10 '19 at 22:14

EternalHour · Answer 2 · 2019-09-10T17:52:20.280

The way to achieve what you want requires that the markup be changed. I put the content in its own container so it could be separately controlled. I also used flex-basis for the .tag-post element so you can control the width. Hopefully this is what you're looking for.

.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

2 Answers2

Linked