Skip to content
On this page

Flexbox And Grid

Gap

用于控制隐式创建的网格行与列之间的间隙的功能类。

使用前缀

为了防止和开发者项目中的其他原子化样式语法冲突,样式库默认添加了前缀 lwu,使用示例如下:

vue
<view class="lwu-flex"></view>

语法

0-3,步进0.5

ClassProperties平台兼容性说明
gap-0gap: 0px;H5、小程序、app-vue
gap-x-0column-gap: 0px;H5、小程序、app-vue
gap-y-0row-gap: 0px;H5、小程序、app-vue
gap-pxgap: 1px;H5、小程序、app-vue
gap-x-pxcolumn-gap: 1px;H5、小程序、app-vue
gap-y-pxrow-gap: 1px;H5、小程序、app-vue
gap-0.5gap: 0.125 * 1rem;H5、小程序、app-vue
gap-x-0.5column-gap: 0.125 * 1rem;H5、小程序、app-vue
gap-y-o.5row-gap: 0.125 * 1rem;H5、小程序、app-vue
gap-1gap: 0.25 * 1rem;H5、小程序、app-vue
gap-x-1column-gap: 0.25 * 1rem;H5、小程序、app-vue
gap-y-1row-gap: 0.25 * 1rem;H5、小程序、app-vue
gap-1.5gap: 0.375 * 1rem;H5、小程序、app-vue
gap-x-1.5column-gap: 0.375 * 1rem;H5、小程序、app-vue
gap-y-1.5row-gap: 0.375 * 1rem;H5、小程序、app-vue
gap-2gap: 0.5 * 1rem;H5、小程序、app-vue
gap-x-2column-gap: 0.5 * 1rem;H5、小程序、app-vue
gap-y-2row-gap: 0.5 * 1rem;H5、小程序、app-vue
gap-2.5gap: 0.625 * 1rem;H5、小程序、app-vue
gap-x-2.5column-gap: 0.625 * 1rem;H5、小程序、app-vue
gap-y-2.5row-gap: 0.625 * 1rem;H5、小程序、app-vue
gap-3gap: 0.75 * 1rem;H5、小程序、app-vue
gap-x-3column-gap: 0.75 * 1rem;H5、小程序、app-vue
gap-y-3row-gap: 0.75 * 1rem;H5、小程序、app-vue
gap-3.5gap: 0.875 * 1rem;H5、小程序、app-vue
gap-x-3.5column-gap: 0.875 * 1rem;H5、小程序、app-vue
gap-y-3.5row-gap: 0.875 * 1rem;H5、小程序、app-vue

4-12,步进1

ClassProperties平台兼容性说明
gap-4gap: 1rem;H5、小程序、app-vue
gap-x-4column-gap: 1rem;H5、小程序、app-vue
gap-y-4row-gap: 1rem;H5、小程序、app-vue
gap-5gap: 1.25rem;H5、小程序、app-vue
gap-x-5column-gap: 1.25rem;H5、小程序、app-vue
gap-y-5row-gap: 1.25rem;H5、小程序、app-vue
gap-6gap: 1.5rem;H5、小程序、app-vue
gap-x-6column-gap: 1.5rem;H5、小程序、app-vue
gap-y-6row-gap: 1.5rem;H5、小程序、app-vue
gap-7gap: 1.75rem;H5、小程序、app-vue
gap-x-7column-gap: 1.75rem;H5、小程序、app-vue
gap-y-7row-gap: 1.75rem;H5、小程序、app-vue
gap-8gap: 2rem;H5、小程序、app-vue
gap-x-8column-gap: 2rem;H5、小程序、app-vue
gap-y-8row-gap: 2rem;H5、小程序、app-vue
gap-9gap: 2.25rem;H5、小程序、app-vue
gap-x-9column-gap: 2.25rem;H5、小程序、app-vue
gap-y-9row-gap: 2.25rem;H5、小程序、app-vue
gap-10gap: 2.5rem;H5、小程序、app-vue
gap-x-10column-gap: 2.5rem;H5、小程序、app-vue
gap-y-10row-gap: 2.5rem;H5、小程序、app-vue
gap-11gap: 2.75rem;H5、小程序、app-vue
gap-11column-gap: 2.75rem;H5、小程序、app-vue
gap-y-11row-gap: 2.75rem;H5、小程序、app-vue
gap-12gap: 3rem;H5、小程序、app-vue
gap-x-12column-gap: 3rem;H5、小程序、app-vue
gap-y-12row-gap: 3rem;H5、小程序、app-vue

14

ClassProperties平台兼容性说明
gap-14gap: 3.5rem;H5、小程序、app-vue
gap-x-14column-gap: 3.5rem;H5、小程序、app-vue
gap-y-14row-gap: 3.5rem;H5、小程序、app-vue

16-64,进步4

ClassProperties平台兼容性说明
gap-16gap: 4rem;H5、小程序、app-vue
gap-x-16column-gap: 4rem;H5、小程序、app-vue
gap-y-16row-gap: 4rem;H5、小程序、app-vue
gap-20gap: 5rem;H5、小程序、app-vue
gap-x-20column-gap: 5rem;H5、小程序、app-vue
gap-y-20row-gap: 5rem;H5、小程序、app-vue
gap-24gap: 6rem;H5、小程序、app-vue
gap-x-24column-gap: 6rem;H5、小程序、app-vue
gap-y-24row-gap: 6rem;H5、小程序、app-vue
gap-28gap: 7rem;H5、小程序、app-vue
gap-x-28column-gap: 7rem;H5、小程序、app-vue
gap-y-28row-gap: 7rem;H5、小程序、app-vue
gap-32gap: 8rem;H5、小程序、app-vue
gap-x-32column-gap: 8rem;H5、小程序、app-vue
gap-y-32row-gap: 8rem;H5、小程序、app-vue
gap-36gap: 9rem;H5、小程序、app-vue
gap-x-36column-gap: 9rem;H5、小程序、app-vue
gap-y-36row-gap: 9rem;H5、小程序、app-vue
gap-40gap: 10rem;H5、小程序、app-vue
gap-x-40column-gap: 10rem;H5、小程序、app-vue
gap-y-40row-gap: 10rem;H5、小程序、app-vue
gap-44gap: 11rem;H5、小程序、app-vue
gap-x-44column-gap: 11rem;H5、小程序、app-vue
gap-y-44row-gap: 11rem;H5、小程序、app-vue
gap-48gap: 12rem;H5、小程序、app-vue
gap-x-48column-gap: 12rem;H5、小程序、app-vue
gap-y-48row-gap: 12rem;H5、小程序、app-vue
gap-52gap: 13rem;H5、小程序、app-vue
gap-x-52column-gap: 13rem;H5、小程序、app-vue
gap-y-52row-gap: 13rem;H5、小程序、app-vue
gap-56gap: 14rem;H5、小程序、app-vue
gap-x-56column-gap: 14rem;H5、小程序、app-vue
gap-y-56row-gap: 14rem;H5、小程序、app-vue
gap-60gap: 15rem;H5、小程序、app-vue
gap-x-60column-gap: 15rem;H5、小程序、app-vue
gap-y-60row-gap: 15rem;H5、小程序、app-vue
gap-64gap: 16rem;H5、小程序、app-vue
gap-x-64column-gap: 16rem;H5、小程序、app-vue
gap-y-64row-gap: 16rem;H5、小程序、app-vue

72、80、96

ClassProperties平台兼容性说明
gap-72gap: 18rem;H5、小程序、app-vue
gap-x-72column-gap: 18rem;H5、小程序、app-vue
gap-y-72row-gap: 18rem;H5、小程序、app-vue
gap-80gap: 20rem;H5、小程序、app-vue
gap-x-80column-gap: 20rem;H5、小程序、app-vue
gap-y-80row-gap: 20rem;H5、小程序、app-vue
gap-96gap: 24rem;H5、小程序、app-vue
gap-x-96column-gap: 24rem;H5、小程序、app-vue
gap-y-96row-gap: 24rem;H5、小程序、app-vue