FlexBoxLayout align-self:flex-end 在 nativescript-vue 中不起作用答案

【问题标题】：FlexBoxLayout align-self:flex-end not working in nativescript-vueFlexBoxLayout align-self:flex-end 在 nativescript-vue 中不起作用
【发布时间】：2019-11-16 14:49:17
【问题描述】：

在我的 nativescript-vue 应用程序中，我使用 flex 布局来创建自定义 ActionBar 组件以重复使用，我正在尝试使搜索图标与行尾对齐，这应该很容易使用 align-self:flex - 结束，但它不适合我，老实说，我是 nativescript 的新手，整个布局的事情就像地狱一样……

https://i.imgur.com/4YFXGo1.png

这是我的代码：

<FlexboxLayout style="width:100%; height:auto; flex-direction:column; align-items:flex-start; justify-content:center;">
        <FlexboxLayout style="width:100%; height:85px; padding:0px 10px; background-color:blue;  flex-direction:row; justify-content:flex-start; align-items:center;">
            <Label :text="'fa-bars' | fonticon" class="fa c_light" style="font-size:25; margin:0 10;"/>
            <Label text="Pacome" fontSize="24" class="c_light" style="margin:0 10;"/>
            <!--THIS SHOULD BE ALIGNED TO THE RIGHT-->
            <Label :text="'fa-search' | fonticon" class="fa c_light" style="font-size:25; margin:0 10; align-self:flex-end;"/>
        </FlexboxLayout >
    </FlexboxLayout >

【问题讨论】：

align-self 在交叉轴上工作，而不是在同一轴上。因此，您不能在此处将align-self 设置为flex-end 的图标放在末尾。您可以使用 GridLayout 来简单地分割空间。
我不明白这一点，在 web flexbox 中它适用于我，因为我将 flex 方向设置为行，所以我的所有子项都在 x 轴上，对吗？
是的。但是 align self 将在交叉轴上工作 - y 轴。这个概念在网络上也是一样的。

标签： javascript vue.js flexbox nativescript

【解决方案1】：

我遇到了同样的问题，这解决了它。将 order 属性添加到孩子：order=0 和 order=1。

【讨论】：