display box和flex的區別

沒區別，僅是各階段草案命名。

flex是最新的，但是在實際的瀏覽器測試中，display: flex 不能完全替代display: -webkit-box

display: box 使用可以參考

display: flex 使用可以參考

相容性的問題可以參考

android uc瀏覽器只支援display: box語法。而ios uc瀏覽器則支援兩種方式

需要注意的是如果要使用line-clamp時需要用display:box;

下面介紹下兩者的語法：

flexbox 為 display 屬性賦予了乙個新的值（即 box 值）, flexbox的屬性有很多，記錄一些比較常用的屬性：

用於父元素的樣式：

display: box; 該屬性會將此元素及其直系子代加入彈性框模型中。（flexbox 模型只適用於直系子代）

box-orient: horizontal | vertical | inherit; 該屬性定義父元素的子元素是如何排列的。

box-pack: start | end | center | justify; 設定沿 box-orient 軸的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，則父元素的子元素是水平的排列方式，反之亦然。（表示父容器裡面子容器的水平對齊方式–垂直排列時–定寬）

box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同級屬性。設定框的子代在框中的排列方式。如果方向是水平的，該屬性就會決定垂直排列，反之亦然。（表示父容器裡面子容器的垂直對齊方式–水平排列時–定高）

用於子元素的樣式：

box－flex: 0 | 任意數字; 該屬性讓子容器針對父容器的寬度按一定規則進行劃分。