Keep the Last Item at the End

A quick and short post to summarize the new trick I learned to align items.

The Problem

I noticed the date part of my posts are not aligned well. Because sometimes the excerpt and the title occupies different spaces, such like this:

The date fields of the two posts doesn't align, however, I'd like them to stay at the bottom.

The Implementation

I use div to make a couple sections for one post item:

<div>
  <div>
    <Cover/>
  </div>

  <div>
    <Title/>
  </div>

  <div>
    <Excerpt/>
  </div>

  <div>
    <Date/>
  </div>
</div>

Then I found this article: Aligning with 'auto margins. In a short is that the auto margin will steal all the free space left over after flexing.

Therefore I just need the last item to take all the space left. Since I use StyledComponent, I created a new div subclass:

const ItemSeparator = styled.div`
  margin-bottom: .2rem;

  :last-of-type {
    margin-top: auto;
  }
`

Note it makes the last separator to have a margin top as auto to take all the space left. Then I replace it with the normal div tag I used:

<div>
  <ItemSeparator>
    <Cover/>
  </ItemSeparator>

  <ItemSeparator>
    <Title/>
  </ItemSeparator>

  <ItemSeparator>
    <Excerpt/>
  </ItemSeparator>

  <ItemSeparator>
    <Date/>
  </ItemSeparator>
</div>

Now it becomes like this, I like it.