Vertically center flex item in a second column

问题

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.

回答1:

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

回答2:

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>

来源：https://stackoverflow.com/questions/57874690/vertically-center-flex-item-in-a-second-column

标签

html

css

flexbox

centering