微信小程序-flex布局中align-items和align-self區別

首先看看菜鳥教程中關於align-items和align-self的定義

align-items：align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。（對齊彈性盒的各項元素）

align-self：align-self 屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。（對齊彈性對象元素內的某個項）

從定義上可以看出是對齊”目標“上存在差異，這樣看上去似乎不太便於理解

/*index.wxml*/
<view class="container">

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


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

  


</view>

/*index.wxss*/
.container{
  height: 100px;
  width: 100%;
  background-color: green;
  display: flex;
  /* flex-direction: column; */
  flex-direction: row;
  flex-flow: wrap;

  justify-content:space-between;  
  align-items: flex-start;
}
.item{
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
  border: 1px solid white;


order: 3;
}
.i3{
  display: flex;
  align-items: flex-end;
  /* flex-grow: 1; */
  order: 1;
}

這里用align-items顯示的結果如圖，可以看到此時文字是在下方，而色塊並沒到下方

如果將代碼align-items換為align-self，整個塊都以從下往上的方式排列了，而數字的位置仍然是在左上角