CSS3弹性盒模型 display:box

　　刚开始做网页时就有一个困惑，为什么display:block只能垂直排列，如果要水平排列就要使用float:left等方式。这种方法最难受的当然是当子元素的数量改变时，需要去修改子元素的宽度使重新适应。bootstrap为了兼容性在实现栅格布局时，就不得不生成大量如下代码：

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}

　　好在有less，使代码量大减，比如：

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
    .calc-grid-column(@index, @class, @type);
    // next iteration
    .loop-grid-columns((@index - 1), @class, @type);
}

　　而CSS3给出了直接的解决方案，就是display: box。当然这个CSS3属性如大多数没得到浏览器的直接支持，需要在box前面加上浏览器的前缀。

　　给出最初的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        body {
            background: black;
        }
        article {
            display: -webkit-box;
            height: 100%;
        }
        article div {
        }
        article div:nth-child(1) {
            background: red;
        }
        article div:nth-child(2) {
            background: green;
        }
        article div:nth-child(3) {
            background: blue;
        }
    </style>
</head>
<body>
    <article>
        <div>123</div>
        <div>abc</div>
        <div>tarol</div>
    </article>
</body>
</html>

　　打开chrome，得到的效果如图：

　　首先比较与传统display:block的不同：

1. 子元素按照水平排列
2. 子元素的宽度没填充
3. 子元素的高度填充了

　　好像就是由display:block的垂直排列转换到了display:box的水平排列。但display:box的功能更加强大，上面三个行为都是可以单独控制的。

1. 由box-orient控制，默认inline-axis(===horizontal)，可设置为block-axis(===vertical)

   article {
       display: -webkit-box;
       height: 100%;
      /* 注意这里加前缀的使property，前面是value*/
       -webkit-box-orient: vertical;
   }

   效果图：
   

2. 由box-flex控制，这个作用于子元素，让子元素具备‘弹性’，具备‘弹性’的子元素可以伸缩到充满父元素
   比如我们把第一个子元素的‘弹性’设置为1

   article div:nth-child(1) {
       background: red;
       -webkit-box-flex: 1;
   }

   效果图：
   
   把所有子元素的‘弹性’设置为1，由于大家的弹性一样，所以宽度一样

   article div {
       -webkit-box-flex: 1;
   }

   效果图：
   
   把第一个子元素的‘弹性’设置为2，其他的维持1不变，由于第一个子元素的‘弹性’是其他子元素的两倍，所以占位也是其他子元素的两倍。就是把老爸的财产分成4份，老大独占2份，老二和老三各得1份。

   article div:nth-child(1) {
       background: red;
       -webkit-box-flex: 2;
   }

   效果图：
   
   乍看一下是对的，但凡事就怕认真fanjian二字。打开F12，看了下width，老二和老三一个是344px，另一个是359px。（老二：就因为我叫老二么）。
   原因出在哪里？出在元素的innerHTML，一个是abc三个字符，一个是tarol五个字符。就像一个弹簧，弹性是一样的，但一个比另一个多两节，拉伸的长度能一样么？处理方式是将所有赋予box-flex属性的子元素全部加上：width:0

   article div {
       -webkit-box-flex: 1;
       width: 0;
   }

   现在对比下，发现是一样的了，或者有1px的差别（老爸：咱一个钢镚就别剁成两瓣了）

3. 由box-align控制，默认是stretch，即填充。可选值是start/end/center/baseline。
   先把之前的flex全部取消掉，然后将可选值赋给父元素，效果图分别如下
   start/baseline:
   
   end:
   
   center: 
   
   总结一下，当box-orient为horizontal时，box-align定义子元素的垂直位置，当box-orient为vertical时，box-align定义子元素的水平位置
4. 说到box-align，就不得不说box-pack，它的作用和box-align是相辅相成的。取值范围也相似：start(default)/end/center/justify。
   将box-align设置为start，对box-pack分别取值，得到的效果如下：
   end: 
   
   center: 
   
   justify:
   
   同样总结下，当box-orient为horizontal时，box-pack定义子元素的水平位置，当box-orient为vertical时，box-pack定义子元素的垂直位置。从表现来看，box-pack更接近text-align的意义，而box-align更接近vertical-align。
5. box-direction，显示子元素的顺序，类似css中的direction，可选值normal(default)/reserve
   删除其他的css property，回归到原始状态，给父元素添加box-direction: reserve，效果图如下：
   
6. box-ordinal-group，box-direction可以逆向显示，box-ordinal-group则可以定义显示的具体次序，作用于子元素。

   article > div:nth-child(1) {
       background: red;
       -webkit-box-ordinal-group: 2;
   }
   article > div:nth-child(2) {
       background: green;
       -webkit-box-ordinal-group: 3;
   }
   article > div:nth-child(3) {
       background: blue;
       -webkit-box-ordinal-group: 1;
   }

   效果图：
   

   同时设置box-direction，则同样进行逆向显示
   

7. box-flex-group，作用于子元素，为子元素设定‘弹性’功能的分组。默认为1，也就是都在第一组。
   为第一个元素的box-flex-group赋值为2

   article > div {
       -webkit-box-flex: 1;
       width: 0;
   }
   article > div:nth-child(1) {
       background: red;
       -webkit-box-flex-group: 2;
   }
   article > div:nth-child(2) {
       background: green;
   }
   article > div:nth-child(3) {
       background: blue;
   }

   效果让人震惊，老大不见了：

   

   因为对box-flex-group的定义是这样的，父元素先分配给组序号大的子元素需要的空间，然后剩余空间全部交给组序号小的子元素去‘弹’。
   就是说，老爸的财产老大要多少给多少，剩下的其他人去分，那老大要多少？他说了：我什么都不要（width:0），所以没有了。（老大：我没说啊）
   修改下第一个子元素的width

   article > div:nth-child(1) {
       background: red;
       -webkit-box-flex-group:;
       width: 200px;
   }

   效果如下：
   
   老大又说了：妈蛋有这种好事，那我全要！

   article > div:nth-child(1) {
       background: red;
       -webkit-box-flex-group:;
       width: 100%;
   }

   然后：
   
   然后他就被揍了。

　　每次写完一篇，总有一种好像漏写了什么的感觉。年过完了，也一个多月没更新了，这篇作为开始吧。