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
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
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
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
See the Pen BLoZKj by SitePoint (@SitePoint) on CodePen.