display:box和display:flex的区别

时间 2019-11-18

标签 display box flex 区别栏目 CSS 繁體版

原文原文链接

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

2、与子元素 display 方式的相关性不一样display:box; 做用下，若是子元素是 block 的，竖着排，若是子元素是 inline、inline-block 的，横着排。 display:flex; 做用下，是横着排仍是竖着排，只取决于 flex-direction 的值是 row 仍是 column。code

3、float 等属性是否受影响的状况不一样display:box; 做用下，float、clear、text-align、vertical-align 仍起做用。 display:flex; 做用下，上述四属性失效。get

4、横向排列时，子元素之间空白字符（空格、换行等）处理不一样display:box; 做用下，不会被忽略。 display:flex; 做用下，忽略。io

具体状况见语法