4.2.1微信小程序 布局基础

概要：

flex-direction   元素排列方向
flex-wrap        是否换行
flex-flow        二者合并

justify-content    主轴对齐
align-items        次轴对齐

flex-grow          放大对齐
flex-shrink        缩小对齐
flex-basis         自己固定
flex: 1 1 50px ;    三者合并

position:absolute  绝对路径/相对路径
  left:300rpx

 

初始样式：wxss

page{
      height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
    }

    .container {
      height: 100%;
      width:100%;
      background-color: rebeccapurple;
      display: flex; /**元素按行排列,不写是按照列*/


    }

    .item{
      height: 100rpx;
      width: 100rpx;
      background-color: rosybrown;
      border: 1px solid #fff;
    }

初始wxml:

<!--index.wxml-->
<view class="container">
  
  <view class="item">
    1
  </view>


  <view class="item">
    2
  </view>

  <view class="item i3" >
    3
  </view>

  <view class="item">
    4
  </view>

  
</view>

模拟器

 

========================================================================================

1. flex 的属性

 //元素排列方向
flex-direction: row; //默认是换行，主轴从左向右
flex-direction: column; //主轴切换为从上到下

//换行方式
flex-wrap: wrap;
flex-wrap: nowrap;//默认，不换行

//flex-direction 和flex-wrap 的缩写
flex-flow: row wrap;

<!--index.wxml-->
<view class="container">
  
  <view class="item">
    1
  </view>


  <view class="item">
    2
  </view>

  <view class="item i3" >
    3
  </view>

  <view class="item">
    4
  </view>
  <view class="item">
    1
  </view>


  <view class="item">
    2
  </view>

  <view class="item i3" >
    3
  </view>

  <view class="item">
    4
  </view>
  
</view>

page{
  height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
}

.container {
  height: 100%;
  width:100%;
  background-color: rebeccapurple;
  display: flex; 
  flex-flow: row wrap;
} 

.item{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
}

 

2.主轴的对齐方式:从左向右

justify-content: center; //居中
justify-content: flex-start;//左对齐 默认
justify-content: flex-end;//右对齐
justify-content: space-between;// 之间的空间相等

<!--index.wxml-->
<view class="container">
  
  <view class="item">
    1
  </view>


  <view class="item">
    2
  </view>

  <view class="item i3" >
    3
  </view>

  <view class="item">
    4
  </view>
  
  
</view>

page{
  height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
}

.container {
  height: 100%;
  width:100%;
  background-color: rebeccapurple;
  display: flex; 
  flex-flow: row wrap;
  justify-content: space-between; 
} 

.item{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
}

3.次轴，从上到下

align-items: flex-start; //从上向下对齐
align-items: flex-end; //从下向上对齐
align-items: center;  //在交叉轴对齐
align-items: stretch;//不设置item 的高度，会延伸从上到下 到底
align-items: baseline; //图标内部有文字，内部文字对齐方式

4.缩小，放大

 缩小：不换行 ，当一行 放不开的时候会等比缩进

<!--index.wxml-->
<view class="container">
  
  <view class="item">
    1
  </view>


  <view class="item">
    2
  </view>

  <view class="item " >
    3
  </view>

  <view class="item">
    4
  </view>
  <view class="item">
    5
  </view>

  <view class="item">
    6
  </view>

  <view class="item " >
    7
  </view>

  <view class="item">
    8
  </view>
   
</view>

page{
  height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
}

.container {
  height: 100%;
  width:100%;
  background-color: rebeccapurple;
  display: flex;   
  flex-direction: row;   
  //flex-wrap:wrap  这里默认不能换行
} 

.item{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
  flex-shrink: 1;   //等比缩进
}

等比放大：当一行有剩余空间的时候，会放大，填充空间

<!--index.wxml-->
<view class="container">
  
  <view class="item">
    1
  </view>


  <view class="item">
    2
  </view>

  <view class="item " >
    3
  </view>

  <view class="item">
    4
  </view>
  
   
</view>

放大前

page{
  height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
}

.container {
  height: 100%;
  width:100%;
  background-color: rebeccapurple;
  display: flex; 
  flex-direction: row;
} 

.item{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
  flex-grow: 1;
}

放大后

 

flex-basis: 200rpx; 单独定义自己的大小，其余的默认按照等比缩放

flex: 1 1 50px ; //grow shrink bais 以上的缩写

 

 

5.相对定位和绝对定位

相对定位：相对于自身进行定位，参照物是自己

绝对定位：元素相对于 离他最近的一个，并且已经定位 的  父级元素 进行定位

page{
  height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
}

.container {
  height: 100%;
  width:100%;
  background-color: rebeccapurple;
  position: relative;
  left:100rpx;
} 

.item{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
}

.i2{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
  position:absolute;
  left:300rpx;
}

说明：定义了container  的relative或absolute 就对他定位了，那么 i2 操作的父级元素就是container 了；反之，则操作的相当于page 这个空白的页面；此情况，i2 相对于container  移动了300rpx ，是相对于container  的。container  相对于page移动了100rpx；如果container  没有相对定位，那么i2 只是相对于page移动300rpx

 

 

 

此情况 container 没有进行定位：

 

page{
  height: 100%; /*必须有这个page 配置，height100%占屏幕才生效*/
}

.container {
  height: 100%;
  width:100%;
  background-color: rebeccapurple;
 
} 

.item{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
}

.i2{
  height: 100rpx;
  width: 100rpx;
  background-color: rosybrown;
  border: 1px solid #fff;
  position:absolute;
  left:300rpx;
}