display:box和display:flex的區別

1、display:box; 是老語法，display:flex;是新語法

2、與子元素 display 方式的相關性不一樣display:box; 做用下，若是子元素是 block 的，豎着排，若是子元素是 inline、inline-block 的，橫着排。 display:flex; 做用下，是橫着排仍是豎着排，只取決於 flex-direction 的值是 row 仍是 column。

3、float 等屬性是否受影響的狀況不一樣display:box; 做用下，float、clear、text-align、vertical-align 仍起做用。 display:flex; 做用下，上述四屬性失效。

4、橫向排列時，子元素之間空白字符（空格、換行等）處理不一樣display:box; 做用下，不會被忽略。 display:flex; 做用下，忽略。

具體狀況見