正文
微信小程序学习笔记（7）--------布局基础
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
ui布局基础一、flex布局1、flex的容器和元素
2、flex容器属性详解
1>flex-direction不仅设置元素的排列方向，还设置主轴和交叉轴如下图主轴是由上到下
2>flex-wap决定元素如何换行（排列不下时）
flex-wap：wap
flex-wap：nowap
flex-wrap: wrap-reverse
3>flex-flow 是flex-direction和flex-wap的简写
4>justify-content元素再主轴上的对齐方式
justify-content: flex-end
justify-content: flex-start
justify-content: center
justify-content: space-around(在主轴上所占的空间是一样的)
justify-content: space-between（两端对齐，中间的间隔是一样的）
5>aligin-items元素再交叉轴的对齐方式
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch（不设置高度时，自动使每个item占满整个容器的高度）
align-items: baseline（让元素以元素里面的一行文字的基线对齐）
Index.wxml
index.wxss
3、flex元素属性详解
1>flex-grow当有多余空间时，元素的放大比例
flex-grow: 0;容器有多余的空间时也不放大。
flex-grow: 1;（每个都占一份）
将3设置为 flex-grow: 2;（当容器有多余空间的时候，1、2、4只占据一份，3占据两份）
2>flex-shrink当空间不足时，元素的缩小比例
flex-shrink: 1;（默认值，空间不足时默认等比缩小）
flex-shrink: 0;（空间不足时不缩小）
1、2、4缩小一份，3缩小10份
3>flex-basis元素再主轴上占据的空间
3在主轴上占据200rpx
4>flex是grow、shrink、basis的简写
order定义元素的排列顺序
在item中设置元素的排列顺序
在wxml文件中设置元素的顺序
align-sellf 定义元素自身的对齐方式会复写 justify-content
二、相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己。
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
1、relative;
相对自己向左偏移150rpx
2、absolute
1、flex的容器和元素
2、flex容器属性详解
1>flex-direction不仅设置元素的排列方向，还设置主轴和交叉轴如下图主轴是由上到下
2>flex-wap决定元素如何换行（排列不下时）
flex-wap：wap
flex-wap：nowap
flex-wrap: wrap-reverse
3>flex-flow 是flex-direction和flex-wap的简写
4>justify-content元素再主轴上的对齐方式
justify-content: flex-end
justify-content: flex-start
justify-content: center
justify-content: space-around(在主轴上所占的空间是一样的)
justify-content: space-between（两端对齐，中间的间隔是一样的）
5>aligin-items元素再交叉轴的对齐方式
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch（不设置高度时，自动使每个item占满整个容器的高度）
align-items: baseline（让元素以元素里面的一行文字的基线对齐）
Index.wxml
index.wxss
3、flex元素属性详解
1>flex-grow当有多余空间时，元素的放大比例
flex-grow: 0;容器有多余的空间时也不放大。
flex-grow: 1;（每个都占一份）
将3设置为 flex-grow: 2;（当容器有多余空间的时候，1、2、4只占据一份，3占据两份）
2>flex-shrink当空间不足时，元素的缩小比例
flex-shrink: 1;（默认值，空间不足时默认等比缩小）
flex-shrink: 0;（空间不足时不缩小）
1、2、4缩小一份，3缩小10份
3>flex-basis元素再主轴上占据的空间
3在主轴上占据200rpx
4>flex是grow、shrink、basis的简写
order定义元素的排列顺序
在item中设置元素的排列顺序
在wxml文件中设置元素的顺序
align-sellf 定义元素自身的对齐方式会复写 justify-content
二、相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己。
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
1、relative;
相对自己向左偏移150rpx
2、absolute
