没有合适的资源?快使用搜索试试~ 我知道了~
Flex布局是一种十分灵活方便的布局方式,目前主流的现代浏览器基本都实现了对Flex布局的完全支持。而在微信小程序中,IOS端使用的渲染引擎WKWebView和安卓端使用的X5 ,也都实现了对Flex的支持。所以为了在小程序开发中更方便地布局,有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍,并直接使用wxss来编写例子,运行环境是小程序的开发者工具。 Flex布局的基本概念 Flex布局直接应用于一个Flex容器,布局的对象是容器中的各个项目元素(“item”)。项目元素布局的核心概念在于两条轴:主轴和交叉轴,通过控制项目元素在主轴、交叉轴上的排列方式进
资源推荐
资源详情
资源评论
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↑
(此图片来源于网络,如有侵权,请联系删除! )
flex-wrap
规定如果容器在主轴方向无法容下所有项目,主轴上的项目如何换行(flex-direction为column和column-reverse时,就是“换
列”了):
nowrap(默认),即不作换行,各个项目相接触时会挤压使宽度变小
wrap:换行,正常从上到下
wrap-reverse:换行,只是各行在交叉轴上的排列方向和wrap时相反
剩余9页未读,继续阅读
资源评论
weixin_38706951
- 粉丝: 4
- 资源: 930
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 三相逆变器电路,MATLAB仿真
- mysql图书管理系统 数据库
- 【java毕业设计】专业实习网站源码(ssm+mysql+说明文档).zip
- jspmv5bo2.sql
- 【java毕业设计】整体衣柜定制系统源码(ssm+mysql+说明文档).zip
- Minecraft-flan 耐久插件
- 【java毕业设计】枣庄美食街网站源码(ssm+mysql+说明文档).zip
- 【java毕业设计】医院门诊挂号系统源码(ssm+mysql+说明文档+LW).zip
- jspm基于JSP的学生社团管理系统v5bo2.zip
- 【java毕业设计】学生信息管理系统源码(ssm+mysql+说明文档+LW).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功