伸縮盒 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;
  }

  View Code

 

 (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  時 ，二者剛好相反