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属性介绍的更多相关文章

  1. display:box;display:flex;弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  2. display:box和display:flex填坑之路

    背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overf ...

  3. display:box和display:inline-box的区别

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  4. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

  5. CSS3盒模型display初探(display:box/display:flex)

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  6. CSS3 display:flex和display:box有什么区别?

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  7. display:box和flex的区别

    没区别,仅是各阶段草案命名flex是最新的 但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考http: ...

  8. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

  9. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

随机推荐

  1. 使用Elastic APM监控你的.NET Core应用

    作者:Jax 前言 在应用实际的运维过程中,我们需要更多的日志和监控来让我们对自己的应用程序的运行状况有一个全方位的了解.然而对于大部分开发者而言,平时大家所关注的更多的是如何更优雅的实现业务,或者是 ...

  2. Integer和Integer常量池

    Integer中有个静态内部类 IntegerCache ,里面有个cache[],也就是Integer常量池  大小为一个字节(-128-127). (jdk1.8.0_101)源码 private ...

  3. Java中存储金额用什么数据类型

    Java面试高频问题:你会用什么数据类型来存储金额? 如果这个时候你回答float,double那么恭喜你,又可以省出时间来准备别的公司的面试了,当面试官说float,和double不行的时候你可能还 ...

  4. print.js继承原有样式

    npm install --save print-js import Print from 'print-js' 调用print.js插件 Print({ printable: 'printJS-fo ...

  5. 基于Python的多线程与多进程

    1.I/O密集型与计算密集型 多进程适用于I/O密集型 多进程适用于计算密集型 2.没有sleep(T)的多个死循环只能用多进程 3.模块介绍: 1)threading模块(_thread模块已淘汰) ...

  6. Python3 爬虫之 Scrapy 核心功能实现(二)

    博客地址:http://www.moonxy.com 基于 Python 3.6.2 的 Scrapy 爬虫框架使用,Scrapy 的搭建过程请参照本人的另一篇博客:Python3 爬虫之 Scrap ...

  7. Angular4+Koa2+MongoDB开发个人博客

    **文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号.** ![file](https://img2018.cnblogs.com/blog/830272/201 ...

  8. Linux配置部署_新手向(四)——Redis安装与配置

    前言 配置完mysql之后,我们来紧接着安装redis,毕竟这些不用太多的思考,就是命令执行,配置文件,连接测试. 安装 首先,我们要看安装哪个版本,可以在Redis官网看看我们安装哪个版本. 在之前 ...

  9. Mybatis源码解析,一步一步从浅入深(五):mapper节点的解析

    在上一篇文章Mybatis源码解析,一步一步从浅入深(四):将configuration.xml的解析到Configuration对象实例中我们谈到了properties,settings,envir ...

  10. 2019-2020学年:Java自学书单(定个小目标)

    spring spring技术内幕(回顾+深入) mysql 高性能mysql innoDB (回顾+深入) redis redis实战 redis设计与实现(巩固) 算法 算法第四版 java实现 ...