javascript - 为 my nativescript-vue 应用程序自定义 ActionBar

Question

我正在尝试为我的nativescript-vue应用程序制作一个自定义ActionBar，我在ActionBar中使用FlexBoxLayout，但它不起作用，栏图标和标题应该向左对齐，但它们居中...

我的代码:

<Page style="background-color:rgb(245,245,245);">
    <ActionBar>
        <FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:center;">
            <Label text="Pacome" fontSize="24" />
        </FlexboxLayout >
    </ActionBar>
     <FlexboxLayout style="flex-direction:column; align-items:center; justify-content:center; background-color:rgb(245,245,245);">
        <!--<FlexboxLayout style="width:100%; height:90px; padding:20px; background-color:blue; flex-direction:row; justify-content:flex-start; align-items:center;">
            <Label :text="'fa-facebook-f' | fonticon" class="fa-brands icon" style="margin:0px 20px 0px 0px;"/>
            <Label :text="'fa-bars' | fonticon" class="fa c_light" style="font-size:25; margin:0px 20px 0px 0px;"/>
            <Label class="c_light" text="Pacome" style="font-size:25;" />
        </FlexboxLayout >
        <Label class="c_normal" text="Pacomer" style="font-size:25;" />-->
    </FlexboxLayout >
</Page>

Answer 1

更改此行:

<FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:center;">

对此:

<FlexboxLayout style="width:100%; height:100%; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:flex-start;">

您还可以尝试text-align:left。

这里是一些关于弹性对齐项目的有用图表:https://css-tricks.com/almanac/properties/a/align-items/