flex均分3列，水平垂直居中问题

Question

<view style="display: flex;justify-content: center;justify-items: center;align-items: center;text-align: center;">
    <view style="flex:1;border-top: 1px dashed rgb(229 229 229 / 86%)">人气</view>
    <view style="flex:1;border-top: 1px dashed rgb(229 229 229 / 86%)">剩余</view>
    <view style="flex:1;border-top: 1px dashed rgb(229 229 229 / 86%)">价格</view>
</view>

为啥，是均分了3列，为啥内容不水平垂直居中呢？ 只是加了text-align: center;，水平居中。

垂直不顶用。

justify-content: center;
justify-items: center;
align-items: center;

这几个玩意儿，没一个起作用。

Answer 1

<view style="display: flex;justify-content: center;align-items: center;">
    <view style="flex:1;border-top: 1px dashed rgb(229 229 229 / 86%); display: flex; align-items: center;">人气</view>
    <view style="flex:1;border-top: 1px dashed rgb(229 229 229 / 86%); display: flex; align-items: center;">剩余</view>
    <view style="flex:1;border-top: 1px dashed rgb(229 229 229 / 86%); display: flex; align-items: center;">价格</view>
</view>

这样就行，如果要这三列里面的内容垂直居中还要单独对着三列设置

Answer 2

flex 布局 你这些属性是针对子元素的
你有三层元素
父级 view
子集 view
孙子级 text
你想 text 垂直水平居中 就得设置子集 view display 布局及其对应属性