微信小程式-flex布局中align-items和align-self差別

2022-03-08 23:50:00

首先看看菜鳥教程中關于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顯示的結果如圖，可以看到此時文字是在下方，而色塊并沒到下方

微信小程式-flex布局中align-items和align-self差別 - 岚者小軒

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

posted on

2019-01-23 16:31

岚者小軒

閱讀(9550)

評論(0)

編輯

舉報