display:box和display:flex的区别

2019独角兽企业重金招聘Python工程师标准>>>

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; 作用下，忽略。

具体情况见

转载于:https://my.oschina.net/u/3407699/blog/1801911