GraceUI 完全基于 flex 布局,并提供了全面的 flex 布局样式,您可以利用它们快速的完成自己的页面布局。
Flex 布局教程推荐 : https://lesscode.work/courses/620617edac7da.html
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
样式名称 | 作用 |
.gui-flex | 声明 flex 布局 |
.gui-rows | 声明子元素排列方式为横向 |
.gui-columns | 声明子元素排列方式为竖向 |
.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 来使目标元素放大,其余元素保持不变;