微信小程序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右边