布局
基于CSS3标准Flex特性定义的布局类
横向布局
样式类简写： h ht hc hb； 全称： horizontal horizontal-top horizontal-center horizontal-bottom。
<div class="h secondary">
<div class="pm primary">
<div>horizontal</div>
<div>h</div>
</div>
<span class="pm warning">B</span>
<span class="pm information">C</span>
</div>纵向布局
样式类简写： v vl vc vr ； 全称 vertical vertical-left vertical-center vertical-right。
<div class="v secondary">
<div class="pm primary">
<div>vertical</div>
<div>v</div>
</div>
<span class="pm warning">B</span>
<span class="pm information">C</span>
</div>层叠布局
样式类简写： s 全称 stack
子元素辅助样式类 f t b l r lt lc lb ct cm cb rt rm rb； 全称 fill/full top bottom left right left-top left-middle left-bottom center-top center-middle center-bottom right-top right-middle right-bottom。
<div class="s secondary" style="height:11rem;">
<div class="t pm information">top</div>
<div class="c pm information">center</div>
<div class="b pm information">bottom</div>
</div>分栏布局
样式类简写： c2 c3 c4 c5 c6 ； 全称 column-2 column-3 column-4 column-5 column-6。
分栏布局的纵向间隔目前还没找到完美的方案。
<div class="c2 secondary cm1">
<div class="pm information">1</div>
<div class="pm information">2</div>
<div class="pm information">3</div>
</div>流动布局
样式类简写： f2 f3 f4 f5 f6 ； 全称 flow-2 flow-3 flow-4 flow-5 flow-6。
<div class="f2 secondary fm1">
<div class="pm information">1</div>
<div class="pm information">2</div>
<div class="pm information">3</div>
</div>分隔线
横向布局和纵向布局中的 <hr> 将自动适配。
<div class="h secondary">
<div class="pm">1</div>
<hr class="information" />
<div class="pm">2</div>
<div class="g pm">3</div>
</div>
<div class="v secondary">
<div class="pm">1</div>
<hr class="warning" />
<div class="pm">2</div>
<div class="g pm">3</div>
</div>间隔
预定义间隔类简写： m0 m1 ms mm ml mx ； 全称 margin-0 margin-1 margin-small margin-medium margin-large margin-extra； 将这些类应用于元素，将获得期望的外边距。
预定义横向布局间隔类简写： hm0 hm1 hms hmm hml hmx ； 全称 horizontal-margin-0 horizontal-margin-1 horizontal-margin-small horizontal-margin-medium horizontal-margin-large horizontal-margin-extra； 将这些类应用于布局容器，将使子元素获得期望的外边距。
预定义纵向布局间隔类简写： vm0 vm1 vms vmm vml vmx ； 全称 vertical-margin-0 vertical-margin-1 vertical-margin-small vertical-margin-medium vertical-margin-large vertical-margin-extra； 将这些类应用于布局容器，将使子元素获得期望的外边距。
预定义分栏布局间隔类简写： cm0 cm1 cms cmm cml cmx ； 全称 column-margin-0 column-margin-1 column-margin-small column-margin-medium column-margin-large column-margin-extra； 将这些类应用于布局容器，将使子元素获得期望的外边距。
预定义流动布局间隔类简写： fm0 fm1 fms fmm fml fmx； 全称 flow-margin-0 flow-margin-1 flow-margin-small flow-margin-medium flow-margin-large flow-margin-extra； 将这些类应用于布局容器，将使子元素获得期望的外边距。
填充
预定义填充类简写： p0 p1 ps pm pl px ； 全称： padding-0 padding-1 padding-small padding-medium padding-large padding-extra； 将这些类应用于元素，将获得期望的内边距。
尺寸
预定义宽度类简写： w0 w5 w10 w15 w20 w25 w30 w35 w40 w45 w50 w55 w60 w65 w70 w75 w80 w85 w90 w95 w100 w62 w38； 全称： width-0 width-5 width-10 width-15 width-20 width-25 width-30 width-35 width-40 width-45 width-50 width-55 width-60 width-65 width-70 width-75 width-80 width-85 width-90 width-95 width-100 width-62 width-38。
预定义高度类简写： h0 h5 h10 h15 h20 h25 h30 h35 h40 h45 h50 h55 h60 h65 h70 h75 h80 h85 h90 h95 h100 h62 h38； 全称： height-0 height-5 height-10 height-15 height-20 height-25 height-30 height-35 height-40 height-45 height-50 height-55 height-60 height-65 height-70 height-75 height-80 height-85 height-90 height-95 height-100 height-62 height-38。
在横向和纵向布局中，可通过应用增长类而填满剩余空间；样式类简写： g ；全称： grow。
圆角
预定义圆角类简写： br0 br1 brs brm brl brx； 全称： border-radius-0 border-radius-1 border-radius-small border-radius-medium border-radius-large border-radius-extra。
阴影
柔化阴影类简写： sb0 sb1 sbs sbm sbl sbx； 全称： shadow-blur-0 shadow-blur-1 shadow-blur-small shadow-blur-medium shadow-blur-large shadow-blur-extra。
硬化阴影类简写： ss0 ss1 sss ssm ssl ssx； 全称： shadow-sharp-0 shadow-sharp-1 shadow-sharp-small shadow-sharp-medium shadow-sharp-large shadow-sharp-extra。