多列均匀布局

【曾以为CSS牛逼了，然而并没有系列】

反省中，工作以来布局这种东西大都是写死的，需求一变多加一列就懵逼了。
一旦被人提问多列均匀布局，脑子里大概能想到flex，还是box来着，很强大，有这个特性能办到，但到底怎么写，未知。

1. 传说中的flex（最后说）
2. 利用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/>变成了倒数第二行往上。**

所以以下两点就能做到大体的布局。

1. .justify 设置text-align: justify
2. .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！简直要逆天！