手册版本 V6.0
Flex 介绍
推荐您基于 flex 布局完成页面布局工作，GraceUI 提供了全面的 flex 布局样式，您可以利用它们快速完成自己的页面布局。
Flex 布局教程推荐 : https://www.lesscode.work/courses/620617edac7da.html
兼容平台
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | ✔ |
样式说明
| 样式名称 | 作用 |
| .gui-flex | 声明 flex 布局 |
| .gui-rows, .gui-row | 声明子元素排列方式为横向 |
| .gui-columns, .gui-column | 声明子元素排列方式为竖向 |
| .gui-wrap | 横向换行，空间不足时元素会换行 |
| .gui-nowrap | 横向不换行，空间不足时元素会压缩并保持在一行内 |
| .gui-space-between | 主轴两端对齐 |
| .gui-justify-content-start | 主轴起始端对齐 |
| .gui-justify-content-center | 主轴居中对齐 |
| .gui-justify-content-end | 主轴结束端对齐 |
| .gui-align-items-start | 侧轴起始端对齐 |
| .gui-align-items-center | 侧轴居中对齐 |
| .gui-align-items-end | 侧轴结束端对齐 |
| .gui-flex1 | 元素自动扩大占满剩余空间 |
模式差别
Flex 布局在 nvue 和 vue 模式下有一下不同 :
01. nvue 下默认竖向排列，vue 下默认横向排列，解决方案 声明主轴方式， gui-rows ( 横向 ) 或者 gui-columns ( 竖向 );
02. nvue 不支持 flex-shark，所以在弹性布局时，动态宽度的元素使用 gui-flex1 来使目标元素放大，其余元素保持不变;
演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。
