弹性盒模型

弹性盒模型 兼容性有点差:
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 ( 数字越小往前放,数字越大往后放)

posted @ 2015-08-31 23:36  晓之殇  阅读(332)  评论(0编辑  收藏  举报