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.