Flex 布局

Zenkuai UI 提供了一套完整的 Flex 布局工具类，让您能够轻松实现各种灵活的布局需求。

基础用法

基础 flex 容器

API

基础类

类名 说明
.flex flex 布局基础类
.flex-1 到 .flex-5 flex 比例（1-5）

主轴方向

类名 说明
.flex-row 水平方向（默认）
.flex-column 垂直方向
.flex-row-reverse 水平反向
.flex-column-reverse 垂直反向

主轴对齐

类名 说明
.flex-center 居中对齐
.flex-start 起点对齐
.flex-end 终点对齐
.flex-between 两端对齐
.flex-around 环绕对齐
.flex-evenly 均匀对齐

交叉轴对齐

类名 说明
.flex-items-center 居中对齐
.flex-items-start 起点对齐
.flex-items-end 终点对齐
.flex-items-stretch 拉伸对齐
.flex-items-baseline 基线对齐

组合类

类名 说明
.flex-center-center 水平垂直居中
.flex-between-center 两端对齐并垂直居中
.flex-around-center 环绕对齐并垂直居中
.flex-evenly-center 均匀对齐并垂直居中

间距类

类名 说明
.gap-8 元素间距 8rpx
.gap-10 元素间距 10rpx
.gap-12 元素间距 12rpx
.gap-15 元素间距 15rpx
.gap-20 元素间距 20rpx
.gap-24 元素间距 24rpx
.gap-30 元素间距 30rpx
.gap-32 元素间距 32rpx

边距类

类名 说明
.margin-l-[size] 左边距，size可选值：8/10/12/15/20/24/30/32
.margin-r-[size] 右边距，size可选值：8/10/12/15/20/24/30/32
.margin-t-[size] 上边距，size可选值：8/10/12/15/20/24/30/32
.margin-b-[size] 下边距，size可选值：8/10/12/15/20/24/30/32

平台差异说明