一、实验目的掌握微信小程序Flex弹性盒模型学会display:flex开启弹性容器掌握flex-direction修改主轴方向完成本次作业核心要求将第一行水平均匀布局由默认从左到右修改为从右到左。练习嵌套Flex布局实现左右混合布局、上下混合布局。代码class全部使用短横线命名做到页面结构与样式分离不使用驼峰命名。二、项目说明页面分为3组Flex布局参考案例效果图实现水平均匀布局4个彩色色块作业修改点添加flex-direction:row-reverse实现元素从右向左排列页面展示文字为【中、华、强、国】。左右混合布局外层横向flex左侧单个红色大方块右侧嵌套纵向flex垂直放置绿色【国】、蓝色【梦】两个方块。上下混合布局外层纵向flex上方是通栏红色长条【强】下方嵌套横向flex放置绿色【军】、蓝色【梦】并排方块。三、核心代码展示1.index.wxml 页面结构代码view classpage view classmain-titleFlex 弹性盒模型/view !-- 第一部分水平均匀布局【作业要求从右向左】 -- view classsection view classsub-title水平均匀布局/view view classflex-row row-reverse view classbox purple国/view view classbox blue强/view view classbox green华/view view classbox red中/view /view /view !-- 第二部分左右混合布局 -- view classsection view classsub-title左右混合布局/view view classflex-row view classbox big-red强/view view classflex-col-right view classbox green国/view view classbox blue梦/view /view /view /view !-- 第三部分上下混合布局 -- view classsection view classsub-title上下混合布局/view view classflex-column view classbox full-red强/view view classflex-row view classbox green军/view view classbox blue梦/view /view /view /view /view2.index.scss 样式代码.page { padding: 20rpx; background-color: #ffffff; } .main-title { font-size: 36rpx; text-align: center; font-weight: bold; margin-bottom: 24rpx; } .sub-title { font-size: 32rpx; color: red; text-align: center; margin: 20rpx 0 12rpx 0; } /* 开启水平弹性 */ .flex-row { display: flex; } /* 作业核心第一行反转从右向左排列 */ .row-reverse { flex-direction: row-reverse; } /* 开启垂直弹性 */ .flex-column { display: flex; flex-direction: column; } /* 左右混合布局的右侧垂直容器 */ .flex-col-right { display: flex; flex-direction: column; flex: 1; } .box { display: flex; justify-content: center; align-items: center; color: #000000; font-size: 28rpx; } /* 水平均匀4个色块均分宽度 */ .purple { background-color: #7b1fa2; flex: 1; height: 100rpx; } .blue { background-color: #2121e0; flex: 1; height: 100rpx; } .green { background-color: #28a728; flex: 1; height: 100rpx; } .red { background-color: #dd2222; flex: 1; height: 100rpx; } /* 左右混合布局 左侧红色大方块 */ .big-red { background-color: #dd2222; flex: 1; height: 200rpx; } /* 上下混合布局顶部通栏红条 */ .full-red { background-color: #dd2222; height: 100rpx; }代码解释display:flex给父容器开启弹性布局子元素进入弹性排版模式。flex-direction: row-reverse本次作业核心修改代码把水平主轴方向反转实现第一行元素从右向左排列。flex:1自动分配剩余空间盒子自动平分父容器宽度。嵌套Flex左右混合布局外层横向flex右侧再嵌套纵向flex实现左边一大块右边上下两个小块的复合布局。全部class使用短横线命名无驼峰命名满足作业编码规范。四、运行效果展示页面标题为Flex弹性盒模型一共分为三部分布局水平均匀布局4个彩色色块通过row-reverse实现从右向左排列页面显示文字中、华、强、国完成作业修改要求。左右混合布局左侧是红色大方块【强】右侧垂直堆叠绿色【国】、蓝色【梦】两个方块色块紧贴无空隙。上下混合布局上方是通栏红色长条【强】下方一行横向并排绿色【军】、蓝色【梦】方块。 整体界面与案例参考效果图保持一致。五、遇到的问题与解决方法布局错乱Flex布局必须给父容器添加display:flex嵌套布局要分清外层和内层flex的主轴方向。第一行顺序没有反转确认给第一行容器添加row-reverse类属性flex-direction:row-reverse。修改代码页面不刷新清理微信开发者工具缓存重新编译项目。六、实验总结本次实验学习Flex弹性盒模型掌握flex-direction控制主轴方向重点使用row-reverse完成作业需求将第一行水平均匀布局改为从右到左。练习嵌套Flex实现复杂混合布局熟悉小程序rpx自适应单位。代码严格遵守命名规范做到结构与样式分离加深对弹性布局的理解。