注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

CSS3弹性盒模型  

2014-07-17 10:34:00|  分类: Css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它既不使用浮动,也不会导致弹性盒容器的外边距与其内容的外边距之间发生塌陷。

CSS3弹性盒模型规范还在发展中,这次实现是基于2012年的规范

使用CSS建立弹性盒子,需要为 display 指定下面的值:
display : flex or display: inline-flex
这样做将元素定义为弹性容器,其子元素即弹性子元素。
flex 值表示弹性容器为块级。inline-flex 值表示弹性容器为原子行级元素 。

//控制方向 (容器元素)
flex-direction: row | column | row-reverse | column-reverse;

//控制伸缩行换行 (容器元素)
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow: <「flex-direction」> || <「flex-wrap」>

//控制伸缩比率 (子元素)
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex-grow:  伸展比率
flex-shrink: 收缩比率
flex-basis: 收缩基准

//显示顺序
(子元素)
order: 0 默认值是0

//主轴对齐(容器元素)「justify-content」属性
flex-start | flex-end | center | space-between | space-around

//侧轴对齐「align-items」
(容器元素)与「align-self」(子元素)属性
flex-start | flex-end | center | baseline | stretch

//堆栈伸缩行「align-content」属性
flex-start | flex-end | center | space-between | space-around | stretch


实例:
http://jsfiddle.net/hjzheng/49gKm/
http://jsfiddle.net/hjzheng/Zb5Hn/
http://jsfiddle.net/hjzheng/zmu3v/
http://jsfiddle.net/hjzheng/584Ga/

参考资料
http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans#.E3.80.8Cflex.E3.80.8D.E7.BC.A9.E5.86.99
http://www.w3cplus.com/css3/css3-flexbox-layout.html
https://developer.mozilla.org/zh-CN/docs/CSS/Tutorials/Using_CSS_flexible_boxes
  评论这张
 
阅读(435)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017