【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;
下面介绍下两者的语法:
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有什么区别的更多相关文章
- display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
- CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- css display:flex 属性
一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...
- 1.display:flex布局笔记
/*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...
- display:flex 布局教程,弹性布局!
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- css中的clear:both,display:flex;
介绍两者一起讨论的原因: 在明天就国庆的日子里陪着程序员的只有代码,啤酒,还有音乐,然后就是灯光下默默陪伴自己的影子.好了,不矫情了. -------------------------------- ...
- HTML/CSS:display:flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- display:box和display:flex填坑之路
背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...
- display:box;display:flex;弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
随机推荐
- idhttp访问HTTPS
idhttp访问HTTPS 访问一个 WEB 网站,如果采用 HTTP 的话,直接使用 TIdHTTP 这个控件,最简单的用法是: S := IdHTTP1.Get('www.qq.com'); 这里 ...
- Flutter移动电商实战 --(17)首页_楼层区域的编写
1.楼层标题组件 该组件非常简单,只接收一个图片地址,然后显示即可: class FloorTitle extends StatelessWidget { final String picture_a ...
- [Oracle]索引对insert和delete操作的影响
主键也是索引的一种,在索引中,不仅存储了索引列上的数据,而且还存储了一个ROWID的值.ROWID是表中一个伪列,是数据库服务自动添加的,表中的每一行数据都有一个ROWID值,它代表这一行的标识,即一 ...
- linux中怎样会引起进程睡眠呢?
答: 使用信号量,wait队列,completion,调用schedule,用GFP_KERNEL指定的内存分配malloc,get,free,page等都会引起睡眠 思考: Q: 为什么会引起睡眠呢 ...
- Objective-C中的self与LLVM Clang新引入的instancetype
我们知道,大部分面向对象语言对于一个类的成员方法都有一个隐含的参数.在C++.Java.C#和JavaScript中是this,而在Objective-C中则是self.当然,由于Objective- ...
- 阿里内部分享:我们是如何?深度定制高性能MySQL的
阿里云资深数据库工程师赵建伟在“云栖大会上海峰会”的分享.核心是阿里云的数据库服务和MySQL分支的深度定制实践分享. 阿里巴巴MySQL在全球都是有名的.不仅是因为其性能,还因为其是全世界少数拥有M ...
- java批量修改指定目录下的文件名
package io; import java.io.File; import java.io.IOException; /** * @Auther: Code * @Date: 2018/9/9 1 ...
- Qt编写自定义控件35-GIF录屏控件
一.前言 在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基 ...
- JAVA 基础编程练习题20 【程序 20 求前 20 项之和】
20 [程序 20 求前 20 项之和] 题目:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前 20 项之和. 程序分析:请抓住分子与分母的变化规律. pac ...
- 使用XCode7打包动态库(Framework)
iOS中的静态库和动态库 概念 静态库(Static Library)以 .a 为后缀,它是你的源码的实现.m文件编译而成的二进制文件集合,需要配合上暴漏的.h文件使用,它在引用链接时拷贝至可执行文件 ...