微信小程序-flex布局中align-items和align-self区别

您当前的位置：首页 > 解决方案

微信小程序-flex布局中align-items和align-self区别

作者： admin
发布于 2019-01-24 10:55:06
来源：
栏目：解决方案

导语：首先看看菜鸟教程中关于align-items和align-self的定义 align-items：align-items 属性定义flex子项在flex容器的当前行的

首先看看菜鸟教程中关于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;
}