微信小程序-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,整个块都以从下往上的方式排列了,而数字的位置仍然是在左上角

 

posted on 2019-01-23 16:31  岚者小轩  阅读(10376)  评论(0编辑  收藏  举报