微信小程序布局学习笔记
微信小程序布局 : 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;