用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2019-1-24 00:24

首先看看菜鸟教程中关于align-items和align-self的定义align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。(对齐弹性盒的各项元素)align-self:align-self 属性定义fle ...

首先看看菜鸟教程中关于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,整个块都以从下往上的方式排列了,而数字的位置仍然是在左上角

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 岚者小轩 来自: cnblogs