gui-row 组件可以快速实现 flex 横向布局 [ 此组件发布于 2021年12月02日 15:50 请注意更新 ~ ] 。
Flex 布局教程推荐 : https://lesscode.work/courses/620617edac7da.html
gui-row : /graceUI/组件目录/gui-row
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
属性名称 | 类型 | 默认值 | 作用 |
wrap | Boolean | false | 内部元素超出宽度是否换行 |
mainAxisAlignment | string | flex-start | 主轴对齐方式 : flex-start 基于左侧开始对齐 flex-end 基于右侧对齐 center 居中对齐 space-around 均匀排列每个元素每个元素周围分配相同的空间 space-between 均匀排列每个元素首个元素放置于起点,末尾元素放置于终点 参考 : https://www.runoob.com/cssref/css3-pr-justify-content.html |
crossAxisAlignment | string | flex-start | 交叉轴对齐方式 : flex-start 基于顶部对齐 flex-end 基于底部对齐 center 居中对齐 参考 https://www.runoob.com/cssref/css3-pr-align-items.html |
customStyle | string | '' | 自定义行内样式,如 : background:#FF0000; |
customClasses | array | [] | 自定义样式类,如 ['gui-margin-top','gui-bg-green'] |