AtoZ CSS Quick Tip: Justifying Text and Using Flexbox

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for justifying text here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, I’ve added a new quick tip/lesson about justifying text for you.

J is for justify Text

There’s not much more to say about justified text so in this post we’ll take a detour into the world of Flexbox and take a look at the ways of justifying the content.

In the screencast for the letter J, we discussed the text-align property and how it can be used to justify text on a page. There’s not much more to say about that so let’s dig into some flexbox instead!

Flexbox has a justify-content property that allows you to position elements within a flex container.

Each value of this property defines how the browser will distribute space between and around flex items along the main axis of their parent container.

There are five different values for justify-content:

* flex-start (default): items are placed at the start of the containing element
* flex-end items are at the end of the containing element
* center items are centered within the containing element
* space-between items are spaced out across the entire width of the containing element, with the first child element at the start and the final child element at the end
* space-around items are spaced out with equal space around them, including space at the start and the end.

Have a look at this example to see the different results when you change the value of the justify-content property.

See the Pen BLoZKj by SitePoint (@SitePoint) on CodePen.