好用又方便记的flex布局css样式整合

用了两年自个封装的css样式，今天才想起来需要先占个坑~~~

.df{display: flex;display: -webkit-flex; /* Safari */}
/* 
nowrap（默认）：不换行 
wrap：换行在第一行的上方
wrap-reverse：换行，第一行在下方
*/
.ffrn{flex-flow:row nowrap;}
.ffrw{flex-flow:row wrap;}
.ffrwr{flex-flow:row wrap-reverse;}
.ffrrn{flex-flow:row-reverse nowrap;}
.ffrrw{flex-flow:row-reverse wrap;}
.ffrrwr{flex-flow:row-reverse wrap-reverse;}
.ffcn{flex-flow:column nowrap;}
.ffcw{flex-flow:column wrap;}
.ffcwr{flex-flow:column wrap-reverse;}
.ffcrn{flex-flow:column-reverse nowrap;}
.ffcrw{flex-flow:column-reverse wrap;}
.ffcrwr{flex-flow:column-reverse wrap-reverse;}



/* 
flex-start（默认值）：左对齐 
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
*/
.jcfs{justify-content:flex-start;}
.jcfe{justify-content:flex-end;}
.jcc{justify-content:center;}
.jcsb{justify-content:space-between;}
.jcsa{justify-content:space-around;}



/* 
flex-start：交叉轴的起点对齐。 
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
*/
.aifs{align-items:flex-start;}
.aife{align-items:flex-end;}
.aic{align-items:center;}
.aib{align-items:baseline;}
.ais{align-items:stretch;}

/* 
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。 
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
*/
.acfs{align-content:flex-start;}
.acfe{align-content:flex-end;}
.acc{align-content:center;}
.acsb{align-content:space-between;}
.acsa{align-content:space-around;}
.acs{align-content:stretch;}

/*
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
*/
.o0{order:0;}
.o1{order:1;}
.o2{order:2;}
.o3{order:3;}
.o4{order:4;}
.o5{order:5;}
.o6{order:6;}
.o7{order:7;}
.o8{order:8;}
.o9{order:9;}

/*
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
注意：该属性是瓜分剩下的空间，而并非父元素的百分比长度
*/
.fg0{flex-grow:0;}
.fg1{flex-grow:1;}
.fg2{flex-grow:2;}
.fg3{flex-grow:3;}
.fg4{flex-grow:4;}
.fg5{flex-grow:5;}
.fg6{flex-grow:6;}
.fg7{flex-grow:7;}
.fg8{flex-grow:8;}
.fg9{flex-grow:9;}

/*
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
也就是说当空间不足的时候缩小比例，为0代表不缩小，为2就代表比一般的缩小快一倍
*/
.fs0{flex-shrink:0;}
.fs1{flex-shrink:1;}
.fs2{flex-shrink:2;}
.fs3{flex-shrink:3;}
.fs4{flex-shrink:4;}
.fs5{flex-shrink:5;}
.fs6{flex-shrink:6;}
.fs7{flex-shrink:7;}
.fs8{flex-shrink:8;}
.fs9{flex-shrink:9;}

/*
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
*/
.asa{align-self:auto;}
.asfs{align-self:flex-start;}
.asfe{align-self:flex-end;}
.asc{align-self:center;}
.asb{align-self:baseline;}
.asb{align-self:stretch;}


.w01{width:4.166666667%;}
.w02{width:8.333333333%;}
.w03{width:12.50000000%;}
.w04{width:16.66666667%;}
.w05{width:20.83333333%;}
.w06{width:25.00000000%;}
.w07{width:29.16666667%;}
.w08{width:33.33333333%;}
.w09{width:37.50000000%;}
.w10{width:41.66666667%;}
.w11{width:45.83333333%;}
.w12{width:50.00000000%;}
.w13{width:54.16666667%;}
.w14{width:58.33333333%;}
.w15{width:62.50000000%;}
.w16{width:66.66666667%;}
.w17{width:70.83333333%;}
.w18{width:75.00000000%;}
.w19{width:79.16666667%;}
.w20{width:83.33333333%;}
.w21{width:87.50000000%;}
.w22{width:91.66666667%;}
.w23{width:95.83333333%;}
.w24{width:100.0000000%;}

.pr {position: relative;}
.pa {position: absolute;}
.pf {position: fixed;}
.fr{float: right;}
.fl{float: left;}