每日一学-001 display: box和display: flex的区别？

于 2021-11-03 14:59:20 发布
阅读量187 收藏
点赞数
分类专栏： CSS 文章标签： css
原文链接：https://www.zhihu.com/question/22991944/answer/357619431
版权

display:box; 是老语法，display:flex;是新语法。

- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/Flexible Box Layout Modulehttps://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/Flexible Box Layout Modulehttps://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
- W3C 2012年第5次草案及以后的候选推荐标准：[display:flex | inline-flex;](CSS Flexible Box Layout Module)

与子元素 display 方式的相关性不同

display:box; 作用下，如果子元素是 block 的，竖着排，如果子元素是 inline、inline-block 的，横着排。

display:flex; 作用下，是横着排还是竖着排，只取决于 flex-direction 的值是 row 还是 column。

float 等属性是否受影响的情况不同

display:box; 作用下，float、clear、text-align、vertical-align 仍起作用。

display:flex; 作用下，上述四属性失效。

横向排列时，子元素之间空白字符（空格、换行等）处理不同

display:box; 作用下，不会被忽略。

display:flex; 作用下，忽略。

在线演示

https://codepen.io/PennyOrAmy/full/qoKadM

参考链接

链接icon-default.png?t=LA23https://www.zhihu.com/question/22991944/answer/357619431

weixin_52089319
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display中的box-flex属性
木子木木的专栏
04-25 553
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。 最经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-webkit)。 即：-web...
详解css display:box 新属性
09-24
CSS的`display: box`属性是CSS3 Flexbox布局的一部分，它允许开发者更灵活地控制元素及其子元素的布局。这个属性在现代网页设计中已经被`display: flex`所取代，但理解`display: box`的工作原理可以帮助我们更好地...
css3 display:box
li_shanshan_ok的专栏
03-30 679
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-web
display:box;与display:flex;区别
soos的博客
07-10 925
display:box;是09年以前的弹性盒模型，display:flex;是12年新出的css属性，两者没有什么区别，仅是各阶段草案命名不同， 推荐使用display:flex;(个人意见仅供参考)
display:box和display:flex的区别
weixin_34023863的博客
04-27 689
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3 display:flex和display:box有什么区别？
jhsyb的专栏
10-18 382
同样是弹性盒模型，但是前后两个版本不同，还是有一定的区别的，以下是百度后的记录总结： 1.前者是flex2012年的语法，也将是以后的标准语法，大部分浏览器已经实现了无前缀版本。 后者是2009年的语法，已经过时，是需要加上对应前缀的。 2.flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box display: box...
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 ...
Food-Blog-Template --- Using-Flex-Box：食品博客模板-使用Flex Box
02-18
1. `display: flex`：开启Flex Box布局模式。将元素变为Flex Container，其内部的直接子元素成为Flex Items。 2. `flex-direction`：控制主轴方向，可设置为`row`（默认，从左到右）、`row-reverse`（从右到左）、`...
another-flex-box-game:了解和测试一些柔韧性盒概念
05-27
"another-flex-box-game" 是一个项目或者在线资源的名称，它专注于帮助用户理解和测试“Flex Box”（弹性盒布局）的概念。在Web开发中，Flex Box是CSS3的一个模块，用于处理容器内元素的布局，提供了一种更加灵活的...
css display:box 新属性
apl2015的博客
04-11 394
一、display:box; 　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。 二、可在其子代设置如下属性 　　前提：使用如下属性，必须在父代设置display:box; 　　1.box-flex:number; 　　　　1）占父级元素宽度的number份 　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置...
display:box和flex的区别
欢迎来到小迪的CSDN博客！
06-01 6359
没区别，仅是各阶段草案命名flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-boxdisplay: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/ display: flex 使用可以参考https://css-tricks.com/snippets/
display:box;
tangxiong0927的博客
09-18 810
记得要设置父节点的width CSS3.0盒模型display:-webkit-box;的使用   分类： 前端开发 |  标签：display:-webkit-box;  |举报|字号 订阅 box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典   的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属
CSS3盒模型-display:box
weixin_30760895的博客
10-28 145
display:box;是css3新添加的盒子模型属性，经典的布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 一、box-flex属性 1.水平等宽盒子 代码： ...
display：box 属性
慕白博客
07-22 2230
一、作用 在元素上设置该属性，可使其子代排列在同一水平上，类似 display:inlineblock;。 目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支 持 ， 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、 chrome/safari（-webkit-)。 二...
display:box 和 display:flex
ribavnu的专栏
06-14 578
出处：https://segmentfault.com/q/1010000003497333 只是flex语法规范更新了几个版本: 前者display:box是2009年的语法版本，使用时需要加上浏览器的前缀，不过现在已经过时了。 后者display:flex是2012年最新修正的语法版本，浏览器支持较好，也将成为以后标准的语法。 中间2011年也提出了一个
CSS3 display:box 用法
ForeverCjl的专栏
05-12 2273
CSS3 display:box 用法css3 给display属性带来了box这个值，这个新值给开发带来了极大的方便。其中的一个场景如下：<div id='outer'> <div id='a1'></div> <div id='a2'></div> <div id='a3'></div> </div>假如我们想要使得内部的123元素水平以不同的比例分割outer所占的空间
display:box和display:flex属性介绍
weixin_30594001的博客
10-25 121
1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面子元素的排列方式，是水平还是竖直horizontal|vertical|inline-axis|block-axis|inherit box-direction:确定父容器里面子容器的排列顺序，...
display:box布局的详细介绍（图解）
热门推荐
AliceWu的博客
08-01 2万+
使用display:-webkit-box布局很久了，但是每次使用的时候都是现用现查，而且发现网上没有找到一篇非常全面的关于此布局的介绍，今天决定写一篇博客来记录这个自适应布局。 1、首先不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/...
display: -webkit-box; 和 display: flex
最新发布
10-18
display: -webkit-box; 和 display: flex 都是用来设置元素的布局方式的CSS属性。它们都可以用来实现弹性盒子布局（Flexbox）。 display: -webkit-box; 是旧版的弹性盒子布局，只能在WebKit浏览器中使用，而 display: flex 是新版的弹性盒子布局，可以在现代浏览器中使用。 两者的区别主要在于一些细节上的差异，比如： 1. 弹性容器的默认方向不同：display: -webkit-box; 的默认方向是水平方向，而 display: flex 的默认方向是垂直方向。 2. 弹性容器的子元素的默认对齐方式不同：display: -webkit-box; 的子元素默认在主轴上居中对齐，而 display: flex 的子元素默认在交叉轴上居中对齐。 3. 弹性容器的一些属性名不同：比如 display: -webkit-box; 中的 -webkit-box-pack 对应 display: flex 中的 justify-content。 如果你想了解更多关于弹性盒子布局的知识，可以参考以下相关问题：

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值