Flex布局在小程序的使用布局在小程序的使用
Flex布局是一种十分灵活方便的布局方式，目前主流的现代浏览器基本都实现了对Flex布局的完全支持。而在微信小程
序中，IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ，也都实现了对Flex的支持。所以为了在小程序开发中更方便地
布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例
子，运行环境是小程序的开发者工具。
Flex布局的基本概念布局的基本概念
Flex布局直接应用于一个Flex容器，布局的对象是容器中的各个项目元素（“item”）。项目元素布局的核心概念在于两条轴：
主轴和交叉轴，通过控制项目元素在主轴、交叉轴上的排列方式进行布局，参见下图：
(此图片来源于网络，如有侵权，请联系删除! )
这里要注意两条轴的方向不是固定的（可以通过flex-direction来控制）；此外一个Flex容器里可以再包含Flex容器，也就是能
拥有多根主轴和交叉轴。
Flex容器属性容器属性
容器属性有6个：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
设定主轴方向：
row →（默认）
row-reverse ←
column ↓
column-reverse↑
剩余9页未读，继续阅读
资源评论
weixin_38706951
- 粉丝: 4
- 资源: 930
最新资源
- 环境监测系统源代码全套技术资料.zip
- 前端分析-2023071100789
- 前端分析-2023071100789
- 基于springboot的调查问卷管理系统源代码全套技术资料.zip
- MATLAB代码：计及碳排放交易及多种需求响应的微网 电厂日前优化调度 关键词：碳排放交易 需求响应 空调负荷 电动汽车 微网 电厂优化调度 参考文档：计及电动汽车和需求响应的多类电力市场下
- 全国高校计算机能力挑战赛往届真题整理
- 小程序毕业设计项目-音乐播放器
- MATLAB代码：考虑多微网电能互补与需求响应的微网双层优化模型 关键词：多微网 电能互补 需求响应 双层优化 动态定价 能量管理 参考文档：《自编文档》 仿真平台：MATLAB+CPLEX 主要
- 智慧校园后勤管理系统源代码全套技术资料.zip
- MATLAB代码：含多种需求响应及电动汽车的微网 电厂日前优化调度 关键词：需求响应 空调负荷 电动汽车 微网优化调度 电厂调度 仿真平台：MATLAB+CPLEX 主要内容：代码主要做的是一
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
