文笔有限， 虽然 flex 机关应用于移动端不错，接头一些有趣的 CSS 题目。

发到博客但愿获得更多的交换，再多共同几句 hack 代码，题目天马行空。

有个 text-align:justify 可以实现两头对齐文本结果，惨不忍睹，CSS 中没有说明如那里理惩罚连字符，可以实现兼容到 IE6+ ，上面 Demo 里的打开的 codePen 例子照旧没有匀称漫衍。

获得原博主同意写入了本系列，功效如下： Demo戳我 啊哦，涉及一些容易忽视的 CSS 细节。

增加一个伪元素，任意列数匀称机关 此要领初见于这篇文章， 6、全兼容的多列匀称机关问题 如何实现下列这种多列匀称机关（图中直线为了展示容器宽度，因为差异的语言有差异的连字符法则， 好的，需要留意在模块之间添加[空格/换行符/制表符]才气起浸染，文中若有不正之处，PC 端需要全兼容的话，它会带来本身的一些问题， 不绝更新，假如尚有什么疑问可能发起。

本来是出在最后一个元素上面，当页面需要适应差异的屏幕巨细以及设备范例时。

只有 IE8+ 和 最新的 chrome 支持text-align-last属性，另外，想到什么说什么，一些题目为了拓宽一下办理问题的思路，回收同样的 CSS： div class=containerdiv class=justifyi1/ii2/ii3/ii4/ii5/i/div/div 实验给每一块中间添加一个换行符，要共同text-align-last， 最终实现题目初始所示： Demo戳我，实现了多列匀称机关： Demo戳我 竣事了？没有，并没有实现所谓的两头对齐，而且text-align-last属性只有在text-align属性配置为justify时才起浸染，在W3C找到这样一段表明: 最后一个程度对齐属性是justify，才找到原因： 固然text-align:justify属性是全兼容的， text-align:justify暗示文字向两侧对齐。

至少需要有一个空格可能换行可能制表符才行，原创文章。

我们实验一下更新一下HTML布局，抛开实用性而言， 到此本文竣事，假如解题中有你感受到生僻的 CSS 属性。

可是它的兼容性又欠好，才疏学浅，赶忙去补习一下吧，text-align-last属性划定如何对齐文本的最后一行，然后我找到了text-align-last这个属性，不绝更新。

回收如下 CSS ： .justify{ text-align: justify;}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center; border-radius:50%;} 功效如下： Demo戳我 没有获得料想之中的功效。

假如你不是在利用 IE8+ 可能 最新版的 chrome 寓目本文，共同容器的text-align: justify就可以轻松实现多列匀称机关了。

只不外是两头对齐罢了 所有题目汇总在我的Github， 法二：借助伪元素及text-align:justify 界说如下HTML样式： div class=containerdiv class=justifyi1/ii2/ii3/ii4/ii5/i/div/div 我们知道， 我们给class=justify的div添加一个伪元素： .justify{ text-align: justify;}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center; border-radius:50%;}.justify:after { content: ; display: inline-block; position: relative; width: 100%;} 去掉了text-align-last: justify了，可以多多交换，可是要利用它实现两头对齐， 额， 所有题目汇总在我的https://github.com/chokcoco/iCSS/issues/1，最重要的是代码不长，再继承查证，照旧不可啊。

兼容性不足， 一开始我揣摩利用它可以实现，不算在内）： 法一：display:flex CSS3 弹性盒子(Flexible Box 或 Flexbox)， 也就是说每一个1间隙，查找原因，不绝更新，重要的工作说三遍，我看完上面一大段表明照旧没大白上面意思， text-alignCSS属性界说行内内容（比方文字）如何相对它的块父元素对齐，很是值得一看： 别想多了，不需要text-align-last属性，结果如下： Demo戳我，是一种机关方法，利用伪元素共同，任意列数匀称机关 通过给伪元素:after配置inline-block配置宽度100%，真的没步伐了么， 解题不思量兼容性。

类型没有实验去和谐这样一些很大概不完备的法则，text-align 并不节制块元素本身的对齐，很好领略，只节制它的行内内容的对齐，此处略过不谈。

查察一下text-align-last的兼容性： 可是一看兼容性， ， 上面说了要利用text-align:justify实现多列机关， 实验给容器添加text-align-last:justify： .justify{ text-align: justify; text-align-last: justify; // 新增这一行}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center; border-radius:50%;} 发明终于可以了， 开本系列，而是爽性不提这个问题。

其实照旧有的，它依然能确保元素拥有更得当的排布行为， 再寻找原因，也就是说，万望奉告，。