弹性布局 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可以方便解决垂直居中，多栏等高，等宽布局，任意对齐等。

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

示例源码

<link rel="stylesheet" href="/static/auicss/css/aui-flex.css">
<section class="aui-content" style="background-color: #fff;">
    <div class="aui-flex-col aui-flex-center aui-border-tb">
        <div class="aui-flex-item-4 aui-flex-row aui-flex-middle aui-padded-10">
            <h3 class="aui-text-danger">淘抢购</h3>
            <p>可爱的你会喜欢</p>
            <img src="/static/auicss/img/f1.jpg">
        </div>
        <div class="aui-flex-item-8 aui-border-l">
            <div class="aui-flex-col aui-padded-10 aui-border-b">
                <div class="aui-flex-item-12">
                    <div class="aui-flex-item-9">
                        <h3 class="aui-text-info">有好货</h3>
                        <p>好品味从挑剔开始</p>
                    </div>
                    <div class="aui-flex-item-3 aui-text-right"><img src="/static/auicss/img/f2.jpg"></div>
                </div>
            </div>
            <div class="aui-flex-col">
                <div class="aui-flex-item-6 aui-padded-10" style="position: relative;">
                    <h5 class="aui-text-warning">爱逛街</h5>
                    <p>疯狂赛车来袭</p>
                    <img src="/static/auicss/img/f3.jpg">
                </div>
                <div class="aui-flex-item-6 aui-padded-10 aui-border-l">
                    <h5 class="aui-text-success">必买清单</h5>
                    <p>都帮你整理好啦</p>
                    <img src="/static/auicss/img/f5.jpg">
                </div>
            </div>
        </div>
    </div>
</section>