display:box和flex的区别
来源:互联网 发布:网络成瘾症心理干预 编辑:程序博客网 时间:2024/06/10 05:20
没区别,仅是各阶段草案命名。
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 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。
- display:box和flex的区别
- display:box 和 display:flex
- CSS3 display:flex和display:box有什么区别?
- CSS3中不熟悉的属性2:display:box和display:flex的区别
- display:box;与display:flex;区别
- CSS3 display:box;和 box-flex详解
- 理解display:box 和 display:flex
- 关于display:flex、以及display:box
- CSS3中display:box模式box-flex不均分的情况
- css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别
- display: flex ,Flex是Flexible Box的缩写,意为"弹性布局"
- display:block和display:inline的区别
- 移动开发CSS3:display:box,box-flex属性
- box-sizing中content-box和border-box的区别
- display:inline、display:block和display:inline-block的区别
- display table 布局 和box 布局同样的内容
- display和visibility的区别
- display和visibility的区别
- 一个程序员的修炼
- CocoaPods使用详解
- 编程第八十四天
- 理解Spring MVC中的异步处理请求(下)
- 常用的头文件和函数
- display:box和flex的区别
- 将QWebkit 转化到 Qt 5.8下使用QWebEngine
- linux 常用命令
- 第二章 编译系统设计
- linux下安装tar.gz
- 编程第八十五天
- 大规模文档相似度计算—基于MapReduce框架
- SDUT 2144 图结构练习——最小生成树
- python3树莓派配置