点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

关于css属性text-align:justify：

先用一句话来理解：只有在存在第二行的情况下，第一行才两端对齐。

今天这篇文章要说什么了？当然，如果仅仅是用一个例子，设定个两行文本，然后证明一下上面这句话的真理性，那就太无聊了。

今天这篇文章，来聊一下，如果是一行的情况下，我们是如何让它两端对齐的。

一、看个现象，同时也验证一下定义的真实性

代码如下：

效果图如下：

如上面这张效果图所示：当不存在第二行的情况下（图中改变div.container的宽高来模拟），只对div.justify设置text-align:justify，子元素无法实现两端对齐。这就证明了justify属性的定义真实性。下面我们来看一下如让一行的情况下实现两端对齐。

二、第一种不太好的实现方法

为了解决这个问题，我找到了一个样式属性text-align-last，这个属性规定如何对齐文本的最后一行，并且text-align-last属性只有在text-align属性设置为justify时才起作用。来试一把

结果，效果真的和想象的一样：

既然，这个属性可以解决问题，出于职业性的反应，它的兼容性如何了，如下图

惨不忍睹，text-align-last的兼容性不理想，没法达到实用的目的。往下看。

三、最常用的实现方法

从定义出去，来寻求更好的解决方法。既然是存在第二行情况下，第一行才两端对齐，那制造一个假的第二行就行了。使用伪元素在适合不过了。

结果和想象的一样。

总结：

通过给伪元素:after设置inline-block，设置宽度100%，配合容器的text-align:justify，就可以轻松实现多列均匀布局了。重要的还是记住它的定义。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！