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.

j1-01

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.

Frequently Asked Questions (FAQs) about CSS Justify Text

What is the difference between justify-content: space-between and space-around in CSS?

In CSS, the justify-content property is used to align items along the horizontal line in a flex container. The space-between and space-around values of this property behave differently. When you use space-between, the browser distributes the space evenly between the flex items, but not around them. This means the first item will be at the start of the line and the last item at the end of the line. On the other hand, when you use space-around, the browser distributes the space evenly around the flex items. This means there will be space on the sides of the first and last items, which is half the size of the space between the items.

How does justify-content: space-evenly work in CSS?

The space-evenly value of the justify-content property in CSS is used to distribute the space evenly between and around the flex items. This means the space between any two items and the space on the extremes will be the same. It’s a great option when you want to maintain equal spacing throughout, regardless of the number of items or their sizes.

Can I use justify-content with grid layout in CSS?

Yes, you can use the justify-content property with CSS Grid layout. It works similarly to how it works in Flexbox, aligning the grid items along the row axis. However, it only works if there is extra space in the grid container, i.e., when the total size of the grid items is less than the size of the grid container.

What is the default value of justify-content in CSS?

The default value of the justify-content property in CSS is flex-start. This means that if you don’t specify a value for justify-content, the browser will align the flex items at the start of the flex container.

How does justify-content work with right-to-left languages in CSS?

The justify-content property in CSS works with right-to-left (RTL) languages such as Arabic or Hebrew by reversing the direction. For instance, if you use justify-content: flex-end, the items will be aligned at the start of the container in RTL languages, which is the right side.

Can I use percentages with justify-content in CSS?

No, you cannot use percentages with the justify-content property in CSS. It only accepts specific keywords such as flex-start, flex-end, center, space-between, space-around, and space-evenly.

How does justify-content work with wrap in CSS?

When you use the flex-wrap property with a value of wrap in a flex container, the flex items can wrap onto multiple lines. In this case, the justify-content property aligns the items on each line separately.

Can I center items vertically and horizontally at the same time using justify-content in CSS?

Yes, you can center items both vertically and horizontally using CSS. For horizontal centering, you can use justify-content: center, and for vertical centering, you can use align-items: center. However, these properties only work in a flex container.

What is the difference between align-items and justify-content in CSS?

In CSS, both align-items and justify-content are used to align items in a flex container, but they work along different axes. The justify-content property aligns items along the horizontal axis (or the main axis), while the align-items property aligns items along the vertical axis (or the cross axis).

Can I use justify-content with inline-flex in CSS?

Yes, you can use the justify-content property with inline-flex in CSS. It works the same way as it does with flex, aligning the flex items along the main axis of the inline flex container.