我正在尝试为我的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>
最佳答案
更改此行:
<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/
关于javascript - 为 my nativescript-vue 应用程序自定义 ActionBar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58880820/