用了两年自个封装的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;}