伸缩盒 Flexible Box(旧)

box-orient  box-pack    box-align  box-flex   box-flex-group  box-ordinal-group   box-direction  box-lines

（1）box-flex：<number>  

　　注意两点即可 a: 以上所有元素必须结合“display: -webkit-box;”使用， 父类的样式里必须有改属性

　　　　　　　　 b: 父类剩余空间按百分比分配

(2) box-orient: horizontal | vertical | inline-axis | block-axis  判断子元素是水平还是垂直显示

　　注意 a: block-axis和horizontal 的话，box-flex的数值就好像没有效果了

(3) box-flex-group: <integer>

     动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）

    

• .box {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-box;
      background: #000;
      width: 240px;
      height: 100px;
      margin: 0;
      padding: 10px;
      list-style: none;
      vertical-align: top;
      /* -webkit-box-orient: vertical; */
  }
  .box li:nth-child(1) {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-box-flex: 1;
      -webkit-box-flex-group: 1;
      -moz-box-flex-group: 1;
      -ms-box-flex-group: 1;
      background: #666;
  }
  .box li:nth-child(2) {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-box-flex: 1;
      -webkit-box-flex-group: 2;
      -moz-box-flex-group: 2;
      -ms-box-flex-group: 2;
      background: #999;
  }
  .box li:nth-child(3) {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-box-flex: 1;
      -webkit-box-flex-group: 1;
      -moz-box-flex-group: 1;
      -ms-box-flex-group: 1;
      background: #ccc;
  }

 (4)box-ordinal-group:<integer>

　　用整数值来定义伸缩盒对象的子元素显示顺序。

　　注意 a: 值越大越往后

 (5)box-direction:normal | reverse

　　注意 a: reverse只是顺序上的改变，并不是以y 轴旋转

 (6) box-lines：single | multiple

　　注意 a: 目前所有主流浏览器都不支持box-lines属性

分析情况都是在box-orient: horizontal时

（7）box-pack：start | center | end | justify	(8)box-align:start | end | center | baseline | stretch
水平的  start 相当于左对齐   center 左右居中   end 右对齐  justify 两端对齐	start从元素其实对齐  center 上下对齐   end 底端对齐   stretch横向排列时子元素自适应父元素

 

分析情况都是在box-orient: vertical  时 ，两者恰好相反