接着上一篇微信小程序从0-1(一)前言,这篇文章主要学习flex布局
目录
这篇文章主要介绍了Flex布局,参考了这篇文章
搭建UI界面
对于iOS开发者来说,UI布局可以使用坐标(frame),也可以使用自动布局。对于微信小程序来说,建议使用Flex布局。
通过上一篇的学习,我们知道了.wxss是设置样式表的文件,所以我们今天学习的flex布局的代码是写在.wxss文件中的。我是理解为iOS中的frame设置代码。
flex布局简介
Flex布局也叫弹性布局是CSS3提出的一种布局解决方案。目前已得到所有现在浏览器的支持。
Flex术语简介:
项目 | 意义 |
---|---|
flex box容器 | flex container,容器,通俗地讲就是屏幕容器 |
flex item 项目 | flex item,项目,子元素,类似于iOS的子视图 |
rpx | responsive pixel它是小程序的一个尺寸单位,小程序中规定,所有屏幕宽度都为750rpx,因此实际屏幕宽度不同1rpx代表的像素也不同。官方详解 |
微信官方建议视觉稿以iPhone 6为标准
容器默认存在两根轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。
main start/main end:主轴开始位置/结束位置;
cross start/cross end:交叉轴开始位置/结束位置;
main size/cross size:单个项目占据主轴/交叉轴的空间;
可以结合iOS frame布局的x、y、w、h来理解
主轴: flex-direction来定义主轴,row和row-reverse就是横轴是主轴。
交叉轴:主轴之外的另一个轴就是交叉轴。
flex容器属性
- flex-direction:项目的排列方向
- flex-wrap:换行
- flex-flow:flex-direction和flex-wrap的简写
- justify-content:定义项目在主轴上的对齐方式
- align-item:定义在交叉轴上的对齐方式
- align-content:多根轴线的对齐方式
flex-direction:项目的排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- row(默认):主轴水平方向,起点在左端;(可以理解为横着左对齐)
- row-reverse:主轴水平方向,起点在右端;(可以理解为横着右对齐)
- column:主轴垂直方向,起点在上边沿;(可以理解为竖着上对齐)
- column-reserve:主轴垂直方向,起点在下边沿。(可以理解为竖着下对齐