深入了解 display: -webkit-box

一、外觀排列

display: -webkit-box 可以讓元素按照橫向或者縱向接排列。通過設置不同的屬性，還可以控制元素間的間距、對齊方式等。

.box {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  -webkit-box-flex: 1;
}

-webkit-box-orient屬性指定子元素排列方向，可以取值horizontal或vertical；-webkit-box-pack屬性指定子元素在水平方向的排列方式，可以取值start、end、center、justify、distribute等；-webkit-box-align屬性指定子元素在垂直方向的排列方式，可以取值start、end、center、baseline、stretch等；-webkit-box-flex屬性指定子元素的拉伸係數，決定元素佔據剩餘空間的比例。

二、文本溢出

在一些容器寬度固定的場景中，長字符串的文本內容可能會出現溢出的問題。display: -webkit-box 提供了一個屬性可以解決這個問題，即 -webkit-box-orient: vertical; 結合 -webkit-box-lines: n;（n為數字），即可實現文本省略號顯示。

.box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-lines: 2;
}

以上代碼指定元素內最多顯示兩行內容，超出部分將被省略，並顯示省略號。（需要注意的是，只有在webkit內核的瀏覽器中支持該屬性）

三、元素排序

display: -webkit-box 提供了一個屬性-webkit-box-ordinal-group可以調整元素在父容器中的排列順序，其值越小排列越靠前。

.box2 {
  display: -webkit-box;
}
.box2 div:nth-child(2) {
  -webkit-box-ordinal-group: 1;
}
.box2 div:nth-child(3) {
  -webkit-box-ordinal-group: 2;
}
.box2 div:nth-child(1) {
  -webkit-box-ordinal-group: 3;
}

以上代碼可以將容器中的三個子元素的排列順序進行排列。

四、重量計算

-webkit-box-flex可以設置子元素佔據剩餘空間的比例，這裡介紹一個特殊的用法：通過為不同的子元素設置-webkit-box-flex不同的值，可以實現盒子內部元素寬度的自適應。當然，這只是一個粗略計算，它並不支持布spring。如果要實現更完美的自適應效果，建議使用CSS 3的彈性盒子布局（Flex）。

.box3 {
  display: -webkit-box;
}
.box3 div:nth-child(1) {
  -webkit-box-flex: 1;
}
.box3 div:nth-child(2) {
  -webkit-box-flex: 2;
}
.box3 div:nth-child(3) {
  -webkit-box-flex: 4;
}

以上代碼中，第一個子元素佔據1/7空間，第二個子元素佔據2/7空間，第三個子元素佔據4/7空間。

五、等高排列

display: -webkit-box 結合 -webkit-box-pack:justify; 可以實現容器中的元素等高排列。

.box {
  display:-webkit-box;  /* 將此 div 設置為 `flex` 容器 */ 
  -webkit-box-pack:justify;  /* 將容器內的元素均分多餘空間，撐滿容器 */ 
  text-align:justify;  /* 讓子元素左右兩端對齊 */ 
}

以上代碼可以使容器中的元素等高排列，並且自動適應容器的高度。