skip to main content

Align pagination links using flexbox

I have recently implemented pagination for posts on my blog.

Each blog post needs to contain one or more links at the end to help the reader navigate to the next or previous post. When a particular post is either first or last on the list there will only be a previous link or a next link respectively.

This is an example of how I needed it.

There are two ways to create this - floats and flexbox. I created two divs to hold the next and prev links, left and right, respectively.

The floats way

It is quite simple to do this using floats. Float the left div to the left and right to the right.

.post-nav .left {
    float: left;
}

.post-nav .right {
    float: right;
    text-align: right;
}

Let us add practical blog post titles to see how it holds up.

The left div took all available space and kicked the right div out of its way and into the next line. Since width is not specified for these two divs, they will take as much width as needed. This is because by default width is specified to be the width of the actual content.

Let us set some width to the left and right divs. I usually set 45% so that the links don't bump into each other. Even if they fit on one line, they will still look like one giant link.

.post-nav div {
    width: 45%
}

This looks much better.

So I wanted to extend this content for the page navigation on the blog home page. Initially, page navigation looked like this. There is also a page number div between the next and prev links.

Let us add float classes to the next and prev links.

Since all divs inside .pagination have a 45% width, the middle div and the right div are kicked off onto next lines.

We could change the .middle class to be an inline element.

.middle {
  display: inline;
}

But this would only work as long as the page number is a relatively smaller number or until the left and right divs don't use up 100% of their 45% of the total width.

So, what do we do then?

Instead of using crazy fixes with margins, adjusting percentage widths, Javascript or any other centering techniques, we can simply switch to flexbox.

The flexbox way

The display property of parent container needs to be set to flex. This will trigger a new layout mode for this container called the flexbox layout and all the child elements of this container will become flex items.

.pagination {
    display: flex;
}

Now, all we need to do is set flex property on the left, middle and right divs and assign it a value of 1. This will divide the parent container into three parts and assign each part to a child elemen making it an equal split.

.pagination {
    display: flex;
}
.left {
    flex: 1;
}
.middle{
    flex: 1;
}
.right {
    flex: 1;
}

I added a border to each pagination div to make it clear that even though the text alignment looks out of place, we can still see that the available width is split perfectly into three pieces.

Hover over the pagination div to see the equal split of width.

With the equal split in place, we can do a little clean up to align text in pagination divs properly.

.left {
    flex: 1;
}

.middle {
    flex: 1;
    text-align: center;
}

.right {
    flex: 1;
    text-align: right;
}

Now even if you have a lot of text in the links, flexbox will still lay the pagination links as above. I have also updated the pagination to a larger number.

If you want to vertically align the page number, you can set the align-items property on the parent container to center.

This is probably the simplest of the examples of the flexbox features. Flexbox is capable of so much more and is used in more complex scenarios. Coupled with media queries, flexbox makes it easier to achieve responsive layouts as well.

I use flexbox frequently for aligning items inside a page layout. On my blog, the top navigation, a few responsive things, and pagination are laid out using flexbox.