微信小程序布局学习笔记

微信小程序布局 : flex布局、相对定位和绝对定位
熟练地掌握布局方法何以使我们在开发微信小程序时更有条理，根据自身需求应用。
flex布局

其中item项就是flex元素，红色部分就是flex容器，默认状态下从左到右是交叉轴，从上到下是主轴。

flex容器属性	功能	值
flex-direction	决定元素的排列方向	row /row-reverse /column /column-reverse
flex-wrap	决定元素换行方式	nowrap/wrap/ wrap-reverse
justify-content	决定元素在主轴上的对齐方式	flex-start/flex-end/center /space-between/space around
align-items	决定元素在交叉轴的对齐方式	flex-start/flex-end/center /baseline/stretch

其中flex-direction和flex-wrap可以简写为flex-flow。

flex元素属性	功能
flex-grow	当有多余空间时，元素的放大比例
flex-shrink	当空间不足时，元素的缩小比例
flex-basis	元素在主轴上占据的空间
order	定义元素的排列顺序
align-self	定义元素自身的对齐方式

其中grow、shrink、 basis的可简写为flex。
使用view标记嵌套，修改flex属性，整体类似从前学习过的css和div布局。
相对定位和绝对定位
相对定位的元素是以自身作为参照物进行定位。
属性-position:relative;
绝对定位的元素是相对离它最近固定元素进行定位。
属性-position:absolute;