3MW (Aligning content with flexboxes)

Author

Albert Rapp
March 20, 2024

Guten Tag!

Many greetings from Munich, Germany. In today’s newsletter, we are finally going to finish our user interface for our weather app. Here’s where we currently stand.

What we still need to do is to align a couple of things nicely. Really, the only thing we have to do is to

  • align the things in the top bar, so that the icons are all the way on the right side of the screen

  • And we need to center the cloud icon so that it is aligned in the middle of the screen.

But before we do that, it’s time for my usual announcements.

Extract information from PDFs

Have a bunch of PDF documents that you need to extract information from? With the {tidychatmodels} package there's a pretty simple workflow of small steps you can use to do that:

Like every week (when I don’t forget to insert the URL 😅), you can find today’s code snippets on GitHub.

Aligning the top bar

Okay, so let’s start out with the top bar. Since we want to move all of the icons further to the right, what we need to do is to first group things together that should be moved together. So let’s put the icons into a new div container.

This unfortunately results in the two containers being stacked on top of each other. And by default this is typically what containers do: They stack on top of each other except if they are inline containers like text or icons. That’s why the icons were previously not below the text but next to it.

In CSS-speak, we would say that we used display: inline earlier and the moment we stuck things into the container, it was display:block. So blocks stack on top of each other and inline stuff stays inline.

Meet Flexbox

In CSS there are two systems that are fantastic for aligning things. One is flexbox and the other one is grid. Here, we don’t need a bunch of elements to align on one grid. Instead, we want two move things around inside of our container. So that means we have to use flexbox instead of grid.

As I’ve just said before, if we want to modify the way things behave when it comes to alignment, we have to change the display. Thus, we set display: flex.

As you can see the moment that happens, the two containers in the top bar align next to each other. That’s because by default Flexboxes align things row wise and do not stack things on top of each other anymore.

Moving elements in flexboxes

But now the question becomes: “How do we align things within one row?” You see, we want one element, i.e. the text of the time, to be at the beginning of the row and we want the icons to be at the end of the row. For these kinds of scenarios, Flexbox has a property called justify-content.

And there are a bunch of settings you can use with justify-content. For example, you could align things to the start of the row with justify-content: flex-start or you could move things to the end of the row with justify-content: flex-end.

In our case, we want to distribute our elements along the row with one element at the beginning and one at the end. And that’s what we use justify-content: space-between for.

Centering the cloud icon

Now let’s move on to the big icon at the bottom in the middle of the app. What we can do now is to make the phone container into a Flexbox so that we can move our icon inside of the Flexbox. But before we do that, you might already anticipate what goes wrong.

If we try to make the parent container into a Flexbox, all of our containers that are right now on top of each other will go next to each other. After all, that’s exactly what we have seen with the top bar.

So we kind of have to figure out how to change the row-wise alignment of Flexboxes. And that’s exactly where flex-direction comes in. You can set that property to column and if you do that, then everything stays as it is but the outside container now is a Flexbox.

Nice! And with that we can use auto margins to move things horizontally. So if you set margin-left: auto and margin-right: auto, on the icon then it will be placed right in the center where we need it.

The remainder of the UI

And with that we have aligned the things that we need. The final ingredient that is missing to complete our user interface is the rows for the forecast of the next couple of days.

But making that happen requires the exact same techniques that we have already learned by now. So I will just leave this part to you. Or if you want to see the solution, you can always check out the blog post I have set up for this user interface or the video on YouTube.

And with that we have finally completed our user interface. I hope you enjoy the rest of your day and if you have any questions don’t hesitate to reply to this mail or contact me on LinkedIn.

See you next week,
Albert 👋

Enjoyed this newsletter and found something helpful? Here are other ways I can help you:

Join the conversation

or to participate.