Flexbox And Grid
Gap
用于控制隐式创建的网格行与列之间的间隙的功能类。
语法
0-3,步进0.5
4-12,步进1
Class | Properties | 平台兼容性说明 |
---|---|---|
gap-4 | gap: 1rem; | H5、小程序、app-vue |
gap-x-4 | column-gap: 1rem; | H5、小程序、app-vue |
gap-y-4 | row-gap: 1rem; | H5、小程序、app-vue |
gap-5 | gap: 1.25rem; | H5、小程序、app-vue |
gap-x-5 | column-gap: 1.25rem; | H5、小程序、app-vue |
gap-y-5 | row-gap: 1.25rem; | H5、小程序、app-vue |
gap-6 | gap: 1.5rem; | H5、小程序、app-vue |
gap-x-6 | column-gap: 1.5rem; | H5、小程序、app-vue |
gap-y-6 | row-gap: 1.5rem; | H5、小程序、app-vue |
gap-7 | gap: 1.75rem; | H5、小程序、app-vue |
gap-x-7 | column-gap: 1.75rem; | H5、小程序、app-vue |
gap-y-7 | row-gap: 1.75rem; | H5、小程序、app-vue |
gap-8 | gap: 2rem; | H5、小程序、app-vue |
gap-x-8 | column-gap: 2rem; | H5、小程序、app-vue |
gap-y-8 | row-gap: 2rem; | H5、小程序、app-vue |
gap-9 | gap: 2.25rem; | H5、小程序、app-vue |
gap-x-9 | column-gap: 2.25rem; | H5、小程序、app-vue |
gap-y-9 | row-gap: 2.25rem; | H5、小程序、app-vue |
gap-10 | gap: 2.5rem; | H5、小程序、app-vue |
gap-x-10 | column-gap: 2.5rem; | H5、小程序、app-vue |
gap-y-10 | row-gap: 2.5rem; | H5、小程序、app-vue |
gap-11 | gap: 2.75rem; | H5、小程序、app-vue |
gap-11 | column-gap: 2.75rem; | H5、小程序、app-vue |
gap-y-11 | row-gap: 2.75rem; | H5、小程序、app-vue |
gap-12 | gap: 3rem; | H5、小程序、app-vue |
gap-x-12 | column-gap: 3rem; | H5、小程序、app-vue |
gap-y-12 | row-gap: 3rem; | H5、小程序、app-vue |
14
Class | Properties | 平台兼容性说明 |
---|---|---|
gap-14 | gap: 3.5rem; | H5、小程序、app-vue |
gap-x-14 | column-gap: 3.5rem; | H5、小程序、app-vue |
gap-y-14 | row-gap: 3.5rem; | H5、小程序、app-vue |
16-64,进步4
72、80、96
Class | Properties | 平台兼容性说明 |
---|---|---|
gap-72 | gap: 18rem; | H5、小程序、app-vue |
gap-x-72 | column-gap: 18rem; | H5、小程序、app-vue |
gap-y-72 | row-gap: 18rem; | H5、小程序、app-vue |
gap-80 | gap: 20rem; | H5、小程序、app-vue |
gap-x-80 | column-gap: 20rem; | H5、小程序、app-vue |
gap-y-80 | row-gap: 20rem; | H5、小程序、app-vue |
gap-96 | gap: 24rem; | H5、小程序、app-vue |
gap-x-96 | column-gap: 24rem; | H5、小程序、app-vue |
gap-y-96 | row-gap: 24rem; | H5、小程序、app-vue |