Reese McLean

Wednesday, February 10, 2016

Flexbox and Alignment

If you are reading this you may see some older/newer or previous/next buttons at the bottom of this page. These are laid out in a Handlebars template like so:

<footer class="pagination">
        <a href="{{url}}">« Previous</a>
        <a href="{{url}}">Next »</a>

So for an individual post, if there is a older one it adds a link to it and if there is an newer one it adds a link for that.

Using flexbox to lay this out looks something like this:

footer {
    width: 100%;
    display: flex;
    justify-content:space-between; //Horizontal
    align-items:center; //Vertical

The footer takes up the whole width, and presses the ends to each side and spaces the items equally in the horizontal direction. This works in all but one case: when there are no previous post and only a newer post, the newer link is left aligned rather than right aligned.

To solve this I need to give the right aligned items an override. So they get a CSS class and we give them the following style:

footer.pagination .rightAlignedFooterLink {
    align-self: flex-end;

And with that newer/next links are now right aligned when there is no older/previous link.

As a note, I originally had misread the attribute name for overriding flex items and used:

footer.pagination .rightAlignedFooterLink {
    align-items: flex-end;

This worked… sometimes. At this point with CSS, I’m never quite sure if I’m slightly off or just completely backwards — I’m sure with experience that will change. It seems similar to when you first start with Auto Layout in iOS land — at first it was baffling but after just a little bit it became my go to way of laying views out.