微信小程序笔记

微信小程序布局

- flex布局基础（可实现浮动布局的所有功能）
1.flex的容器和元素

图片解释：

item1和item2是flex元素
默认情况下从左到右是主轴，从上到下是交叉轴

2.flex容器属性详解

• flex-direction决定元素的排列方向（也是决定主轴和交叉轴）

row主轴默认 column交叉轴

• flex-wrap决定元素如何换行（排列不下时）

nowrap不换行 wrap换行 wrap-reverse反转

• flex-flow 是flex-direction和flex-wrap的简写
• justify-content元素在主轴上的对齐方式

属性	对齐方式
flex-start	左边对齐默认
flex-end	右对齐
center	居中对齐
space-around	每个元素两边间隔相等平均对齐
space-between	每个元素间隔一样分散对齐

• align-items元素在交叉轴的对齐方式

属性	对齐方式
flex-start	从头部对齐
flex-end	从尾部对齐
center	在中间对齐
sretch	当元素没有设置高度时，自动使item中的值填充整个交叉轴
baseline	让元素以元素里面的文字中一行文字的底线对齐

3.flex元素属性详解
flex-grow当有多余空间时，元素的放大比例
flex-shrink当元素空间不足时，元素的缩小比例
flex-basis元素在主轴上占据的空间
flex是grow、shrink、basis的简写
order定义元素的排列顺序
align-self定义元素自身的对齐方式
4.flex布局实战
代码举例
index.wxml

<view class="page">
   <view class="item" style="order:4">     
     1   
   </view>
   <view class="item" style="order:3">     
     2   
   </view>
   <view class="item" style="order:1">      
     i3  
   </view>   
   <view class="item" style="order:2">     
     4  
   </view>
  
</view>

index.wxss

page{   
      height: 100%;  
      width: 100%;   
      background-color:  aquamarine;   
      display: flex;   
       /*flex-direction:column;*/   
       /* flex-direction: row; */   
      flex-wrap: wrap;   
      flex-flow: row wrap;
      justify-content: center;   
      align-items: flex-start;
     }
 
.item{ 
      width: 100rpx; 
      height: 100rpx; 
      background-color:  blueviolet;   
      border: 1px solid #fff;  
       flex: 0 1 50px;  
         }
         
  .i3{    
     display: flex;   
     align-items: flex-end;   
     order: 1;   
     align-self: center;
     }

- 相对定位和绝对定位：

- 浮动布局