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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值