CSS3 display:flex和display:box有什么区别？

作者admin

1月 20, 2023

flex: 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

box: 2009年的语法，已经过时，是需要加上对应前缀的。

所以兼容性的代码，大致如下

/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -webkit-box; 

/* Firefox 17- */
display: -moz-box; 

/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -webkit-flex; 

/* Firefox 18+ */
display: -moz-flex; 

/* IE 10 */
display: -ms-flexbox; 

/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
display: flex;

flex布局和box布局的默认值区别

1、box布局与flex布局仅有的几个属性表现一致的：

box-orient: horizontal | vertical
== flex-direction: row | column // 决定主轴方向，默认值都是横向
box-pack: start | end | center | justify
== justify-content: flex-start | flex-end | center | space-around //默认值是start
box-align: start | end | center | baseline | stretch //默认值为start
== align-items: flex-start | flex-end | center | baseline | stretch //默认值为stretch
// baseline有兼容性问题，最好别用。

2、flex布局的flex-shink默认值是0，即如果父元素宽度不够，每个元素都会压缩自己的宽度。box布局默认就是元素自己的宽度。