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

发布时间：2020-12-14 19:25:35 所属栏目：资源来源：网络整理

导读：首先看看菜鸟教程中关于align-items和align-self的定义 align-items ：align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。（对齐弹性盒的各项元素） align-self ：align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对

首先看看菜鸟教程中关于align-items和align-self的定义

align-items：align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。（对齐弹性盒的各项元素）

align-self：align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。（对齐弹性对象元素内的某个项）

从定义上可以看出是对齐”目标“上存在差异，这样看上去似乎不太便于理解

复制代码

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

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


  ="item">
      2
  >
  
  ="item  i3">
      3
  >
 
  >
       4
  >

  


>

复制代码

/*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{ 100rpx; yellow; border: 1px solid white; order: 3; } .i3{ flex; align-items: flex-end; flex-grow: 1; order: 1; }

复制代码

这里用align-items显示的结果如图，可以看到此时文字是在下方，而色块并没到下方

如果将代码align-items换为align-self，整个块都以从下往上的方式排列了，而数字的位置仍然是在左上角

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!