小程序flex布局align-items属性失效原因

flex布局学习资料

阮一峰flex布局

布局文章

问题

开发小程序时，采用flex布局，使用align-items属性时失效，元素无法基线对齐

star不对齐，箭头不对齐

代码

wxss代码，align-items属性值无效

wxml代码

这里有赞的Vant weapp的cell有个居中属性

也是写的flex的align-items属性。显然也是无效。

原因

多方排查，是van-cell内部嵌套了太多view导致居中失效。

改正一

将title插槽内部的view标签全部改为不需渲染的block标签后，可居中对齐。

改正二

（这里van-cell的点击反馈关闭失效了，自己写了个箭头）
右侧的写法写错了，写成左侧title的形式了。

错误写法

<view slot="right-icon">
   <van-icon class="rightIconTitle" name="arrow" />
</view>

官网右侧right-icon插槽的写法

<van-cell title="单元格">
  <van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>

官网左侧title插槽的写法

<view slot="title">
   <view class="van-cell-text">单元格</view>
   <van-tag type="danger">标签</van-tag>
</view>

这里写错了（不必要的举一反三），导致居中对齐失败。