栅格系统由24格组成

class命名遵循BEM + emmet的格式:
.[模块名称]__[响应式阈值]-[属性|组件名称][描述]--[属性值|状态]
eg:
  .fg__pad-offset-12 (在pad下偏移12格距离)

.fg-row     横向从左到右排列
.fg-col     纵向从上到下排列
.fg-row--r  横向从右到左排列
.fg-col--r  纵向从下到上排列
这里的 --r 即是 reverse 的缩写
以上四个class是定义flexGrid的类

（注意：flexGrid里的元素默认是溢出换行的。）
.fg-wrap--no  设置flexGrid为不换行
.fg-wrap--r   设置flexGrid为反向换行
.fg-wrap      设置flexGrid为默认换行

.fg-row.fg-wrap
  .fg-12 0
  .fg-12 1
  .fg-12 2

.fg-row.fg-wrap--r
  .fg-12 0
  .fg-12 1
  .fg-12 2

.fg-row.fg-wrap--no
  .fg-12 0
  .fg-12 1
  .fg-12 2
ps: 当前设置了3个占据12格的子元素，但是因为父元素被设置了不换行,
于是3个子元素就会分别进行收缩，确保可以在同一行

.fg-auto  不论剩余空间过多还是不足，都保持原有大小

.fg-full  剩余空间过多将会变大占用剩余空间，不足会换行
          如果父元素被设置了不换行(.fg-wrap--no),
          那么它会缩小自己以弥补不足的空间
 
改变浏览器宽度看看吧！

.fg-row
  .fg-auto.u-ta--c 我只占九个字符大小
  .fg-auto.u-ta--c 我也占九个字符大小
  .fg-full.u-ta--c 我会占用余下空间，没位置就换行

.fg-row.fg-wrap--no
  .fg-auto.u-ta--c 我只占九个字符大小
  .fg-auto.u-ta--c 我也占九个字符大小
  .fg-full.u-ta--c 我会占用余下空间，没位置就减肥

.fg-jc--sb
  justify-content space-between
 
.fg-jc--sa
  justify-content space-around
 
.fg-jc--c
  justify-content center
 
.fg-jc--fe
  justify-content flex-end
 
.fg-jc--fs
  justify-content flex-start

.fg-row
  .fg-6
  .fg-6
  .fg-6

.fg-row.fg-jc--sb
  .fg-6
  .fg-6
  .fg-6

.fg-row.fg-jc--sa
  .fg-6
  .fg-6
  .fg-6

.fg-row.fg-jc--c
  .fg-6
  .fg-6
  .fg-6

.fg-row.fg-jc--fe
  .fg-6
  .fg-6
  .fg-6

.fg-row.fg-jc--fs
  .fg-6
  .fg-6
  .fg-6

.fg-ai--st
  align-items stretch
 
.fg-ai--bl
  align-items baseline
 
.fg-ai--c
  align-items center
 
.fg-ai--fe
  align-items flex-end
 
.fg-ai--fs
  align-items flex-start

.fg-row.fg-jc--fs
  .fg-6
  .fg-6
  .fg-6