AtoZ CSS快速提示：对齐文本并使用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.

本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 在此处查看完整的屏幕录像和解说词，以证明文本合理。

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.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道，有时截屏视频还不够，因此在本文中，我添加了一个有关为您证明文本合理性的新快速提示/课程。

J是justify文本 (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.

关于合理文本，没有太多要说的了，因此在本文中，我们将绕过Flexbox的世界，并探讨使内容合理化的方法。

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!

在字母J的截屏视频中 ，我们讨论了text-align属性以及如何使用它来使页面上的文本justify 。 关于这一点，没有太多要说的了，所以让我们来研究一些flexbox！

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

Flexbox具有justify-content属性，可让您在flex容器中放置元素。

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:

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.

* flex-start (默认)：物品放置在包含元素*的开始flex-end项目是在包含元素*的端部center的数据项都包含元素内居中* space-between的物品跨过隔开包含元素的整个宽度，第一个子元素在开始处，最后一个子元素在末尾* space-around项目之间以相等的间距隔开，包括开头和结尾处的空格。

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

看看这个例子，可以看到当您更改justify-content属性的值时得到的不同结果。

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

请参阅CodePen上的SitePoint( @SitePoint )提供的Pen BLoZKj 。

翻译自: https://www.sitepoint.com/atoz-css-quick-tip-justify-text/