码迷,mamicode.com
首页 > 其他好文 > 详细

弹性盒模型

时间:2015-09-01 01:31:28      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

弹性盒模型 兼容性有点差:
display: flex; (主轴和侧轴)
flex - direction: ( 方向的设置 )
column 从上往下排列
column - reverse 从下往上排列
row 从左向右排列(默认值)
row - reverse 从右向左排列
justify - content: (主轴对齐)
flex-start ( 默认 )元素在开始位置 富裕空间占据另一侧
flex-end 元素占据另一侧 富裕空间在开始位置
center 元素居中 富裕空间 平分左右两侧
space - between 富裕空间在元素之间平均分配
space - around 富裕空间在元素两侧平均分配
align - items : ( 侧轴对齐 )
flex-start ( 默认 )元素在开始位置 富裕空间占据另一侧
flex-end 元素占据另一侧 富裕空间在开始位置
center 元素居中 富裕空间 平分左右两侧
flwx - wrap : (换行)
wrap
wrap - reverse 反向换行
align - content: (堆栈伸缩行,针对换行)
flex-start ( 默认 )元素在开始位置 富裕空间占据另一侧
flex-end 元素占据另一侧 富裕空间在开始位置
center 元素居中 富裕空间 平分左右两侧
space - between 富裕空间在元素之间平均分配
space - around 富裕空间在元素两侧平均分配
flex :
none (不会被挤压)
auto (默认)
order :
默认 0 ( 数字越小往前放,数字越大往后放)

弹性盒模型

标签:

原文地址:http://www.cnblogs.com/xiaozhishang/p/4774628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!