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>
这里写错了(不必要的举一反三),导致居中对齐失败。