【css】display：flex和display：box有什么区别

说法一：

注意：
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
所以兼容性的代码，大致如下
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

说法二：

没区别，仅是各阶段草案命名。

flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box

display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
兼容性的问题可以参考https://css-tricks.com/old-flexbox-and-new-flexbox/
Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式
需要注意的是如果要使用line-clamp时需要用display:box;

下面介绍下两者的语法：

flex的语法可以查考这篇博客
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 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。

巴特西

【css】display：flex和display：box有什么区别

下面介绍下两者的语法：

用于父元素的样式：

用于子元素的样式：

最新文章

热门文章