微信小程序Flex弹性布局实验教程

一、实验目的1. 理解Flex弹性布局的基本概念掌握弹性容器、弹性项目、主轴、交叉轴的含义。2. 熟练使用flex‑direction、flex‑grow属性实现水平均匀布局、左右混合布局、上下混合布局。3. 将第一行水平均匀布局修改为**从右向左排列**。4. 使用scroll‑view组件实现页面竖向滚动关闭Skyline渲染引擎。二、实验环境1. 微信开发者工具三、实验原理Flex为弹性布局。设置display:flex的元素是Flex容器子元素就是Flex项目。 - flex‑direction控制主轴方向row‑reverse实现从右向左排布。 - flex‑grow分配容器剩余空间控制子元素占比。 - scroll‑view添加scroll‑y实现页面手动竖向滚动。四、实验作业要求1. 完成案例2.4 Flex弹性布局。2. 第一行水平布局改为从右到左排列。3. 保留左右混合布局、上下混合布局。4. app.json删除Skyline相关配置。5. scroll‑view实现页面滚动。五、完整源代码### app.json{pages: [pages/index/index],window: {navigationBarTextStyle: black,navigationStyle: custom},style: v2,sitemapLocation: sitemap.json,lazyCodeLoading: requiredComponents}pages/index/index.wxml!--index.wxml--navigation-bar titleFlex弹性盒模型 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview classtitle水平均匀布局/viewview styledisplay: flex;flex-direction: row-reverse;line-height: 120rpx;text-align: center;view stylebackground-color: red;flex-grow: 1;中/viewview stylebackground-color: green;flex-grow: 1;华/viewview stylebackground-color: blue;flex-grow: 1;民/viewview stylebackground-color: purple;flex-grow: 1;族/view/viewview classtitle stylemargin-top: 40rpx;左右混合布局/viewview styledisplay:flex;text-align:center;view stylebackground-color:red;width:50%;line-height:240rpx;强/viewview styledisplay:flex;flex-direction:column;flex-grow:1;line-height:120rpx;view stylebackground-color:green;国/viewview stylebackground-color:blue;梦/view/view/viewview classtitle stylemargin-top:40rpx;上下混合布局/viewview styledisplay:flex;flex-direction:column;view stylebackground-color:red;line-height:120rpx;强/viewview styledisplay:flex;line-height:120rpx;view stylebackground-color:green;flex-grow:0.5;军/viewview stylebackground-color:blue;flex-grow:1;梦/view/view/view/view/scroll-viewpages/index/index.wxss/**index.wxss**/page {height: 100vh;display: flex;flex-direction: column;}.scrollarea {flex: 1;overflow-y: hidden;}app.wxss/**app.wxss**/.box {margin: 20rpx;padding: 20rpx;border: 2rpx solid silver;}.title {font-size: larger;font-weight: bolder;text-align: center;margin-bottom: 30rpx;color: red;}六、运行效果第一行水平布局从右往左显示文字顺序族、民、华、中。存在水平均匀布局、左右混合布局、上下混合布局三块内容。页面可以手指上下滑动外层银色边框标题红色居中。七、实验总结本次实验学习Flex弹性布局使用row‑reverse完成布局反转利用flex‑grow实现不等分布局。通过scroll‑view实现页面滚动。写CSS要注意单词拼写拼写错误会直接导致样式完全失效。