|
微信小程序布局 : 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;
|
客服电话
APP下载
官方微信
请发表评论