AUI Flex

AUI Flex(aui-flex.css)采用12个栅格进行布局,与aui-col-xs-*相比更灵活性,可以快速布局出自己所需要的框架结构。结合aui.css,能彻底解决布局+样式的问题。

在AUI Flex中,使用了aui-flex-col(横向)和aui-flex-row(纵向)两种容器,只需要把栅格放入容器中即可。AUI Flex所有类支持嵌套布局,可任意进行排列。

使用AUI Flex可以方便解决垂直居中,多栏等高,等宽布局,任意对齐等。

(在安卓4.2及以下,由于对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 等宽对齐

<p><br /></p>