display:box和display:flex属性介绍
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:确定父容器里面子容器的排列顺序,normal|reverse|inherit
box-align:表示父容器里面子容器的垂直对齐方式,start|end|center|baseline|stretch
box-pack:表示父容器里面子容器的水平对齐方式,start|end|center|justify
box-lines:决定子元素是单行显示还是可以换行,single|multiple
子元素的属性有box-flex|box-flex-group|box-ordinal-group
box-flex:子元素所占比例,取值为数字
box-flex-group:作用不详,浏览器不支持
box-ordinal-group:可以改变子元素的顺序
Tips:
(1).在box-orient属性中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
2.display:flex
父容器的属性有flex-direction|flex-wrap|flex-flow|justify-content|align-items|align-content
flex-direction:决定主轴的排列方向,row|row-reverse|column|column-reverse,类似于display:box里面的box-orient
flex-wrap:决定是否可以换行,wrap|nowrap|wrap-reverse,类似于display:box里面的box-lines
flex-flow:flex-directionheflex-wrap的简写形式
justify-content:决定子元素在主轴上的对齐方式,flex-start|flex-end|enter|space-between|space-around,类似于display:box里面的box-pack或者box-align
align-items:决定子元素在交叉轴上的对齐方式,flex-start|flex-end|center|baseline|stretch(默认)
align-content:义了多根轴线的对齐方式,flex-start|flex-end|enter|space-between|space-around|stretch
子元素的属性有order|flex-grow|flex-shrink|flex-basis|flex|align-self
order:决定子元素排列顺序,数值越小,排的越靠前
flex-grow:定义子元素的放大比例,默认0,不放大
flex-shrink:定义子元素的缩小比例,默认1,即如果空间不足,子元素将缩小
flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小
flex:flex-grow,flex-shrink,flex-basis的简写
align-self:允许子元素单个于其他子元素不一样的对齐方式,可覆盖align-items属性。默认值auto,表示继承父元素align-items属性,如果没有父元素,等同于stretch
网上有很多资料可查,这个只是为了方便自己使用。
链接:
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
display:box和display:flex属性介绍的更多相关文章
- display:box;display:flex;弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- display:box和display:flex填坑之路
背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...
- display:box和display:inline-box的区别
display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...
- display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
- CSS3盒模型display初探(display:box/display:flex)
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- display:box和flex的区别
没区别,仅是各阶段草案命名flex是最新的 但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考http: ...
- 被废了的display:box弹性盒模型
这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...
- CSS3弹性盒模型 display:box
刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...
随机推荐
- Linux入门基础之一
Linux 入门基础 一.Linux 系统安装 安装方法网上很多,请自行百度 二.Linux 基本操作 2.1.GNOME图形界面基本操作 操作类似于Windows系统操作 打开每一个文件夹都会打开一 ...
- 055 Python第三方库安装
目录 一.概述 二.看见更大的Python世界 2.1 Python社区 2.1.1 PyPI 2.1.2 实例:开发与区块链相关的程序 2.2 安装Python第三方库 三.第三方库的pip安装方法 ...
- 分库分表之后,id 主键如何处理?
其实这是分库分表之后你必然要面对的一个问题,就是 id 咋生成?因为要是分成多个表之后,每个表都是从 1 开始累加,那肯定不对啊,需要一个全局唯一的 id 来支持.所以这都是你实际生产环境中必须考虑的 ...
- Python学习之turtle库和蟒蛇绘制程序
Python的函数库 Python语言与C语言Java类似,可以大量使用外部函数库包含在安装包中的函数库:. 比如math, random, turtle等其他函数库,其他函数库用户根据代码需求自行安 ...
- zookeeper学习(一)_简介
上篇文章 我们已经安装上了zookeeper,也简单的体验了一把,但是如果让你给别人介绍下zookeeper,可能也是说不出来.本篇文章就参考了网上各位优秀博主的文章,整理出自己更能理解的内容 优秀博 ...
- 对android中ActionBar中setDisplayHomeAsUpEnabled和setHomeButtonEnabled和setDisplayShowHomeEnabled方法的理解
转自: http://blog.csdn.net/lovexieyuan520/article/details/9974929 http://blog.csdn.net/cyp331203/artic ...
- STL迭代器
大部分ACM中使用的都是C/C++语言,但是说到C语言和C++语言的区别,却不知道. C++语言用于竞赛真的是非常方便的,里面有很多函数还有STL这个好东西,比C语言方便,比其他语言好理解. 在C语言 ...
- charles 重写工具/rewrite Srttings
本文参考:charles 重写工具 rewrite Srttings 重写工具/rewrite Srttings and rewrite rule 功能:在通过charles时修改请求和响应 重写工具 ...
- 06 (OC)* iOS中UI类之间的继承关系
iOS中UI类之间的继承关系 此图可以更好的让你去理解iOS中一些底层的关系.你能够了解以及理解UI类之间的继承关系,你会更加明白苹果有关于底层的东西,更有助于你的项目开发由它们的底层关系,就能更加容 ...
- NestedInteger Java
''' class NestedInteger { private List list; private Integer integer; public NestedInteger(List<N ...