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

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

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

下面先来看一个使用AUI Flex仿淘宝的布局案例:

淘抢购

可爱的你会喜欢

有好货

好品味从挑剔开始

爱逛街

疯狂赛车来袭

必买清单

都帮你整理好啦

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 等宽对齐

其他案例样式(一)图片排列

其他案例样式(二)

  • 分类一
  • 分类二
  • 分类三
  • 分类四
  • 分类五
  • 分类六
  • 分类七
  • 分类八
  • 分类九
  • 分类十
  • 图文列表

    图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略

  • 图文列表

    图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略

  • 图文列表

    图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略

  • 图文列表

    图文列表缩略图在左边的样式,默认大小为80PX,文字介绍内容可以为一行也可以为两行,超出部分自动省略