【曾以为CSS牛逼了，然而并没有系列】
反省中，工作以来布局这种东西大都是写死的，需求一变多加一列就懵逼了。
一旦被人提问多列均匀布局，脑子里大概能想到flex，还是box来着，很强大，有这个特性能办到，但到底怎么写，未知。
- 传说中的flex（最后说）
- 利用text-align: justify和伪元素
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
<!--[if lte IE 7]><b></b><![endif]--><!-- 兼容不支持伪元素的 ie678 -->
</div>
首先，如果一个p里面有一堆文字（不足一行），给p设置text-align:justify是不会均匀分布的，而是！设置text-align-last: justify了才会是那种均匀分布的赶脚。
Paste_Image.png
什么时候text-align: justify才会起作用呢？文档控懵逼中，学不进去了，等阳光灿烂帅儿子学会给我讲呢。
（帅儿子查到了，text-align：justify是在两行以上，排除最后一行的文本中生效的，只有一行的文本只能用text-align-last：justify来设置）
所以说！实现下面这种均匀分布的话，就可以用text-align:justify（单纯改变<i></i>的个数就可以实现）
Paste_Image.png
涉及到的点就下面这几个(这段总结太好了，我都服了我自己)：
(1)能用text-align:justify 和 text-align-last:justify的，首先里面的东西得是inline，或是inline-block;
(2)如果text-align-last:justify可用，那实际上一行text-align-last:justify就够了，但是text-align-last:justify不好用，所以就得用text-align:justify来代替；
(3)而让text-align:justify生效的前提是，它至少是倒数第二行；
(4)所以用伪元素假装出一个最后一行,并且占满一行，也就让里面的那些/<i/>变成了倒数第二行往上。**
所以以下两点就能做到大体的布局。
- .justify 设置text-align: justify
- .justify:after{ display:inline-block; width: 100%; }
总的css如下：
.justify {
position: relative;
width: 100%;
height: 24px;
text-align: justify;
margin-bottom: 20px;
}
.justify i{
width:24px;
line-height:24px;
display:inline-block;
text-align:center;
background:#333;
color:white;
border-radius:50%;
overflow: hidden;
font-style: normal;
}
.justify:after{
content:"";
}
.justify:after,
.justify b{
display: inline-block;
position:relative;
top:-28px;
*top:-9px;
height:1px;
line-height: 0;
width:100%;
background:#333;
z-index:-1;
*zoom:1;
}
——————————————华丽丽地分割一下——————————————
flex吧，只能说牛逼了我的flex！超好用啊有木有！简直是布局界的一股径流啊。。。
对于flex来说，子元素基本除了宽度就不用设置什么了，
*全靠厉害的爹设置一个display: flex, 和 justify-content: **(默认水平排列，垂直的话用flex-direction: column;)就可以了昂~！
啥憋说了，，看图吧。。
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
尤其是最后这两个space-around 和 space-between！简直要逆天！
