字体大小

文字对齐

内外边距

内外边距一共有五种尺寸，{size}*类名分别为：xs，sm，df，lg，xl，分别从*10rpx，20rpx，30rpx，40rpx，50rpx。类名介绍类名介绍.margin-{size}外边距.padding-{size}外边距.margin-lr-{size}水平方向外边距.padding-lr-{size}水平方向内边距.margin-tb-{size}垂直方向外边距.padding-tb-{size}垂直方向内边距.margin-top-{size}上外边距.padding-top-{size}上内边距.margin-right-{size}右外边距.padding-right-{size}右内边距margin-bottom-{size}下外边距.padding-bottom-{size}下内边距.margin-left-{size}左外边距.padding-left-{size}左内边距

图标用法

引入icon.css，直接用即可。

<!--page.wxml-->
<text class="cuIcon-apps text-gray"></text>

其中，colorui的图标，大部分是有两个模式的，一个普通状态，一个fill状态。fill状态直接在普通状态的名字后面加上fill即可。

flex 布局

• 固定尺寸#在父级元素类名中添加flex flex-wrap之后，在子级元素类名添加以下类名即可。类名介绍实际属性basis-xs20%宽度flex-basis: 20%;basis-sm40%宽度flex-basis: 40%;basis-df50%宽度flex-basis: 50%;basis-lg60%宽度flex-basis: 60%;basis-xl80%宽度flex-basis: 80%;
• 比例布局在父级元素类名中添加flex之后，在子级元素类名添加以下类名即可。类名介绍实际属性flex-sub相同宽度flex: 1;flex-twice两倍宽度flex: 2;flex-treble50%宽度flex: 3;
• 水平对齐#在父级元素类名中添加flex ，同时添加以下类名即可。类名介绍实际属性justify-start左对齐（默认值）justify-content: flex-start;justify-end右对齐justify-content: flex-end;justify-center居中justify-content: center;justify-between两端对齐，项目之间的间隔都相等。justify-content: space-between;justify-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。justify-content: space-around;
• 垂直对齐在父级元素类名中添加flex ，同时添加以下类名即可。类名介绍实际属性align-start起点对齐align-items: flex-start;align-end终点对齐align-items: flex-end;align-center中点对齐align-items: center;