Layout 布局
使用说明
布局是指将一个页面进行区域划分，弹性布局是本框架的基础布局方式。为了保证手机端自适配，引入ax-split-*类，ax-split-1表示在手机端一行显示1个；ax-split-2表示在手机端一行显示2个；ax-split-*最多取值到6，即最多自适配6个；ax-split等于ax-split-1。使用ax-row和ax-col可创建基本的弹性布局，这二者是基础类，标准结构如下：
<div class="ax-row">
<div class="ax-col">撑满的部分</div>
自由的部分
</div>
弹性布局
除了使用ax-row和ax-col创建水平弹性布局，另外也使用ax-flex-row和ax-flex-block类来创建水平弹性布局。
<div class="ax-flex-row">
<div class="ax-flex-block">撑满的部分</div>
自由的部分
</div>
ax-flex-block-*支持从1到6。
<div class="ax-flex-row ax-split">
<div class="ax-flex-block-1"><section class="demo-section-border">1份</section></div>
<div class="ax-flex-block-2"><section class="demo-section-border">2份</section></div>
<div class="ax-flex-block-3"><section class="demo-section-border">3份</section></div>
<div class="ax-flex-block-1"><section class="demo-section-border">1份</section></div>
</div>
没有间隙的布局
ax-col-*表示列占多少份，支持ax-col-1~ax-col-24。比如：ax-col-6表示在24等分前提下该方格占6份，4个方格完成一行。
<div class="ax-row ax-split">
<div class="ax-col ax-col-6"><section class="demo-section-border">6</section></div>
<div class="ax-col ax-col-6"><section class="demo-section-border">6</section></div>
<div class="ax-col ax-col-6"><section class="demo-section-border">6</section></div>
<div class="ax-col ax-col-6"><section class="demo-section-border">6</section></div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-8"><section class="demo-section-border">8</section></div>
<div class="ax-col ax-col-4"><section class="demo-section-border">4</section></div>
<div class="ax-col ax-col-10"><section class="demo-section-border">10</section></div>
<div class="ax-col ax-col-2"><section class="demo-section-border">2</section></div>
</div>
有间隙的布局
使用ax-gutter-*创建水平间隙，使用ax-break-*创建垂直间隙。
ax-gutter-xxs创建4px的水平间距ax-gutter-xs创建8px的水平间距ax-gutter-sm创建12px的水平间距ax-gutter/ax-gutter-md创建14px的水平间距ax-gutter-lg创建16px的水平间距ax-gutter-xl创建22px的水平间距ax-gutter-xxl创建28px的水平间距ax-break-xxs创建4px的垂直间距ax-break-xs创建8px的垂直间距ax-break-sm创建10px的垂直间距ax-break/ax-break-md创建14px的垂直间距ax-break-lg创建18px的垂直间距ax-break-xl创建22px的垂直间距ax-break-xxl创建28px的垂直间距
<div class="ax-row">
<div class="ax-col ax-col-6"><section class="demo-section-border">6</section></div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-12"><section class="demo-section-border">12</section></div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-6"><section class="demo-section-border">6</section></div>
</div>
<div class="ax-break"></div>
<div class="ax-row">
<div class="ax-col ax-col-8"><section class="demo-section-border">8</section></div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-4"><section class="demo-section-border">4</section></div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-10"><section class="demo-section-border">10</section></div>
<span class="ax-gutter"></span>
<div class="ax-col ax-col-2"><section class="demo-section-border">2</section></div>
</div>
有分割线的布局
使用ax-gutter-line创建垂直分割线，（注意：父层高度不确定情况下需要给垂直分割线添加height样式）；使用ax-break-line创建水平分割线，可创建分割线布局。
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-break-line"></div>
<div class="ax-row">
<div class="ax-col ax-col-6"><section class="demo-section">6</section></div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col ax-col-12"><section class="demo-section">12</section></div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col ax-col-6"><section class="demo-section">6</section></div>
</div>
<div class="ax-break-line"></div>
<div class="ax-row">
<div class="ax-col ax-col-8"><section class="demo-section">8</section></div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col ax-col-4"><section class="demo-section">4</section></div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col ax-col-10"><section class="demo-section">10</section></div>
<span class="ax-gutter-line" style="height: 80px;"></span>
<div class="ax-col ax-col-2"><section class="demo-section">2</section></div>
</div>
等分布局
网页布局中5/7/9/11等分也经常被用到，但是在24分法中不能被之整除，所以另外使用ax-col-5-avg，ax-col-7-avg，ax-col-9-avg，ax-col-11-avg类进行等分。等分方格ax-col-*-avg支持从1到12。
<div class="ax-row ax-padding">
<div class="ax-col ax-col-1-avg"><section class="demo-section-border">1-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-2-avg"><section class="demo-section-border">2-avg</section></div>
<div class="ax-col ax-col-2-avg"><section class="demo-section-border">2-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-3-avg"><section class="demo-section-border">3-avg</section></div>
<div class="ax-col ax-col-3-avg"><section class="demo-section-border">3-avg</section></div>
<div class="ax-col ax-col-3-avg"><section class="demo-section-border">3-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-4-avg"><section class="demo-section-border">4-avg</section></div>
<div class="ax-col ax-col-4-avg"><section class="demo-section-border">4-avg</section></div>
<div class="ax-col ax-col-4-avg"><section class="demo-section-border">4-avg</section></div>
<div class="ax-col ax-col-4-avg"><section class="demo-section-border">4-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-5-avg"><section class="demo-section-border">5-avg</section></div>
<div class="ax-col ax-col-5-avg"><section class="demo-section-border">5-avg</section></div>
<div class="ax-col ax-col-5-avg"><section class="demo-section-border">5-avg</section></div>
<div class="ax-col ax-col-5-avg"><section class="demo-section-border">5-avg</section></div>
<div class="ax-col ax-col-5-avg"><section class="demo-section-border">5-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-6-avg"><section class="demo-section-border">6-avg</section></div>
<div class="ax-col ax-col-6-avg"><section class="demo-section-border">6-avg</section></div>
<div class="ax-col ax-col-6-avg"><section class="demo-section-border">6-avg</section></div>
<div class="ax-col ax-col-6-avg"><section class="demo-section-border">6-avg</section></div>
<div class="ax-col ax-col-6-avg"><section class="demo-section-border">6-avg</section></div>
<div class="ax-col ax-col-6-avg"><section class="demo-section-border">6-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
<div class="ax-col ax-col-7-avg"><section class="demo-section-border">7-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
<div class="ax-col ax-col-8-avg"><section class="demo-section-border">8-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
<div class="ax-col ax-col-9-avg"><section class="demo-section-border">9-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
<div class="ax-col ax-col-10-avg"><section class="demo-section-border">10-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
<div class="ax-col ax-col-11-avg"><section class="demo-section-border">11-avg</section></div>
</div>
<div class="ax-row ax-padding">
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
<div class="ax-col ax-col-12-avg"><section class="demo-section-border">12-avg</section></div>
</div>
垂直布局
使用ax-flex-col和ax-flex-block类来创建垂直弹性布局。
撑满的部分
自由的部分
<div class="ax-flex-col" style="height:200px;text-align: center">
<div class="ax-flex-block" style="background-color: #fafafa;">撑满的部分</div>
自由的部分
</div>
ax-flex-block-*支持从1到6。
1份
2份
3份
1份
<div class="ax-flex-col" style="height:200px;text-align: center">
<div class="ax-flex-block-1" style="background-color: #fafafa;">1份</div>
<div class="ax-flex-block-2" style="background-color: #f0f0f0;">2份</div>
<div class="ax-flex-block-3" style="background-color: #fafafa;">3份</div>
<div class="ax-flex-block-1" style="background-color: #f0f0f0;">1份</div>
</div>
手机端取消自适应布局
因为手机宽度较小，通过对ax-row，ax-flex-row和ax-flex-col追加ax-split类可使该弹性布局在手机端强制失效以尽量保证一行显示更多内容。ax-split只在手机下有效！
<div class="ax-row ax-split">
<div class="ax-col"><section class="demo-section-border">第一部分</section></div>
<div class="ax-col"><section class="demo-section-border">第二部分</section></div>
</div>
如果自适应布局是等分布局可以使用ax-split-*的方式在手机端实现等分布局，支持ax-split-1~ax-split-6，ax-split-1表示在手机端强制一行显示一个，ax-split-6表示在手机端强制一行显示6个。本例是手机端强制一行两个。
对已经使用ax-col-*-avg的布局也有效。本例是手机端强制一行两个。