amazeui学习笔记--css布局--网格Grid

转载自https://blog.csdn.net/weixin_34014555/article/details/85988299

 

一、总结

基本使用

1、div+class布局：amaze里面采取的就是div+class的布局方式  <div class="am-g am-g-collapse">

2、网格布局中的行和列：.am-g .am-u-xx-n

3、3种尺寸：sm md lg

4、从普通css到amaze： .am-g { margin: 0 auto; width: 100%; }   .am-g-fixed { max-width: 1000px; }

5、容器：.am-container

6、固定行宽：am-g-fixed

7、网格数不足 12：需要在最后一列上添加 .am-u-end。   <div class="am-u-sm-3 am-u-end">3</div>//如果不添加.am-u.end会向右浮动

 

进阶使用

1、down、only：针对不同设备的显示情况  <span class="am-show-md-down">sm-6</span>

2、列边距（offset）：<div class="am-u-sm-2 am-u-sm-offset-9">2, offset 9</div>

3、居中的列：添加 .am-u-xx-centered 实现列居中：  <div class="am-u-sm-3 am-u-sm-centered">3 centered</div>

4、移除列内边距：.am-g-collapse 在行 .am-g 上添加 .am-g-collapse，移除列的内边距（padding）。 <div class="am-g am-g-collapse">