AUI Flex(aui-flex.css)采用12个栅格进行布局,与aui-col-xs-*相比更灵活性,可以快速布局出自己所需要的框架结构。结合aui.css,能彻底解决布局+样式的问题。
在AUI Flex中,使用了aui-flex-col(横向)和aui-flex-row(纵向)两种容器,只需要把栅格放入容器中即可。AUI Flex所有类支持嵌套布局,可任意进行排列。
使用AUI Flex可以方便解决垂直居中,多栏等高,等宽布局,任意对齐等。
注意:考虑到Android4.2.2对flex的兼容性问题,对aui-flex-item-*加了position:relative属性,但是不支持换行,行排列时如果有换行每行可以加入aui-flex-col
可爱的你会喜欢
好品味从挑剔开始
疯狂赛车来袭
都帮你整理好啦
AUI Flex语法详解:
A.容器类
.aui-flex-col 横向排列
.aui-flex-row 纵向排列
B.栅格类
.aui-flex-item-* *为从1-12数字,默认将屏幕进行12等分进行排列
.aui-flex-offset-* *为从1-12数字,向左偏移量
.aui-flex-auto 自动填充宽度
C.对齐类
.aui-flex-top 顶端对齐
.aui-flex-bottom 底部对齐
.aui-flex-left 左对齐
.aui-flex-right 右对齐
.aui-flex-middle 垂直居中
.aui-flex-center 水平居中
.aui-flex-between 等宽对齐