微信小程序ui-布局

tip：rpx根据机型不同的分辨率自己调整符合分辨率的值，动态

一.flex布局基础

容器

**

容器属性：

**
1.flex-direction:元素排列方式
.container{
height:100%;
width:100%;
background-color:aquamarine;
display:flex;
flex-direction: column;//竖排，主轴和交叉轴位置交换
row横排默认
}

2.flex-wrap:排列不下换行
nowrap默认不换行
wrap换行
wrap-reverse翻转，第一行在下面

3.flex-flow:前俩的简写
flex-flow：row warp;

4.justify-content:主轴上的对齐方式
center在主轴上居中
flex-start默认左边
flex-end右边
space-around每个元素间隔相等距离（两端也有距离）
space-between两端对齐中间有相同间隔（两端无距离）

5.align-items:交叉轴上的对齐方式
center在交叉轴上居中
flex-start默认上边
flex-end下边
stretch当元素没有设置高度时，自动让元素占满容器的高度
baseline元素以元素内的文字对齐

元素

元素属性：

不能用在container里面

1.flex-grow:有多余空间时，元素放大比例
0默认 1份 2份
2.flex-shrink:空间不足，缩小比例
1默认 空间不足等比缩小 0不缩小

3.flex-basis:元素在主轴上占据的空间
4.flex：前三的简写
5.order:定义元素排列顺序

 <view class="item" style="order:4">1</view>  

6.align-self:定义元素自身的对齐方式
align-self：center;可以定义单独一个元素

二.相对定位和绝对定位

当两个元素没有重叠和覆盖，一个元素覆盖到两个地方

相对定位：相对自身进行定位，参照物是自己
position:relative;
left:150px;//在原来该元素所在的位置，向右移动
top：150px;//向下移动

绝对定位：相对离它最近的一个已定位的父级元素进行定位
position:absolute;
left:150px;//向右移动
top：150px;//向下移动
若找不到这样的父级元素，会以页面进行绝对定位