FLEX布局
| css | style | 备注 |
|---|---|---|
| fl | display:flex; flex-direction:row; | |
| fv | display:flex; flex-direction:column; | |
| flr | flex-direction: row-reverse; | |
| fvr | flex-direction: column-reverse; | |
| ffs | flex-shrink:1; | |
| ffs.0 | flex-shrink:0; | |
| ffg | flex-grow:1; | |
| ffg.0 | flex-grow:1; | |
| fasa | align-self: auto; | |
| fasc | align-self: center; | |
| fass | align-self: flex-start; | |
| fase | align-self: flex-end; | |
| fasb | align-self: baseline; | |
| fasst | align-self: stretch; | |
| faic | align-items: center; | |
| fais | align-items: flex-start; | |
| faie | align-items: flex-end; | |
| faib | align-items: baseline; | |
| faist | align-items: stretch; | |
| facc | align-content: center; | |
| facs | align-content: flex-start; | |
| face | align-content: flex-end; | |
| facb | align-content: baseline; | |
| facst | align-content: stretch; | |
| fjcs | justify-content: flex-start; | |
| fjce | justify-content: flex-end; | |
| fjcc | justify-content: center; | |
| fjcb | justify-content: space-between; | |
| fjca | justify-content: space-around; | |
| fjcse | justify-content: space-evenly; | |
| ffww | flex-wrap: wrap; | |
| ffwn | flex-wrap: nowrap; | |
| ffwfr | flex-wrap: wrap-reverse; | |
| fbs | box-sizing; | |
| fbs.n | box-sizing: none; | |
| fbsb | box-sizing: border-box; | |
| fbsn | box-sizing: none; | |
| fbsc | box-sizing: content-box; |