微信小程序《案例2.4Flex布局》前言Flex弹性布局是小程序页面布局最常用的方案能够轻松实现元素水平、垂直排列等分空间、嵌套混合布局。本次案例实现三种布局效果水平均匀布局、左右混合布局、上下混合布局课后作业要求把第一行水平布局修改为从从右到左反向排列。Flex基础概念flex‑container容器设置 display:flex 的父盒子。flex‑item项目容器内部直接子元素。主轴 main‑axis元素排列的方向默认 row 横向设置 column 变成纵向。flex‑grow 子元素占剩余空间的比例值越大分得空间越多全部设置为1代表等分。flex‑direction: row‑reverse 实现水平方向从右向左反向排列本次作业核心属性。app.json 配置文件新建项目删除Skyline渲染相关配置使用v2样式。代码如图所示index.wxml 页面结构已完成作业修改第一行从右向左排列重点改动第一行外层view增加 flex-direction: row-reverse; 实现水平从右往左排布。代码如图所示index.wxss 页面样式代码如图所示app.wxss 全局样式代码如图所示效果说明水平均匀布局作业修改后 flex-direction:row‑reverse 四个色块从右向左依次展示族、民、华、中 flex‑grow:1 实现四个盒子均分宽度。左右混合布局外层水平flex左侧固定占50%宽度右侧容器设置 flex‑direction:column 垂直排布“国、梦”两块。上下混合布局外层设置 flex‑direction:column 实现上下排布下方容器再次开启水平flex通过不同 flex‑grow(0.5和1) 实现不等宽分配。效果展示如图核心Flex知识点display:flex 把当前view变成flex容器子元素开启弹性布局。flex‑direction 设置主轴方向row 默认从左到右水平排列row‑reverse 水平从右向左排列本次作业关键column 从上到下垂直排列column‑reverse 从下到上垂直排列flex‑grow 子元素扩张比例分配容器剩余空间数值越大分得空间越大。Flex布局支持多层嵌套水平容器内部可以嵌套垂直容器实现复杂混合布局。作业心得通过本案例实操掌握了小程序Flex弹性布局。区分了flex容器和flex项目学会使用 flex‑direction 修改排列方向 flex‑grow 控制子元素空间占比。Flex支持多层嵌套可以组合水平、垂直布局实现复杂页面。本次作业使用 row‑reverse 实现反向排列加深了对主轴方向的理解。Flex布局是小程序开发必备技能比传统定位布局更加简单适配不同屏幕更加方便。