In the context of a NativeScript app, I've been struggling to find an efficient, non-hacky way to do what seems pretty simple: have one item in the center of a layout, and another item all the way to the right or left of the layout--something like the images in this question: Center and right align flexbox elements. The items should all be in a single row as they are there. (I've looked through those solutions, but I don't want to add a pseudo-element, and a lot of CSS just doesn't work with NativeScript.) Is there some kind of clean, canonical way to do this with the default layouts? In case this isn't "specific" enough, say I have a scenario like this:
<SomeLayout>
<Label text="Center me"></Label>
<Label text="Pull me to the right"></Label>
</SomeLayout>
The text properties of the labels describe what I'm looking for. Please test any suggestions or be sure that they work.
you can use horizontalAlignment with GridLayout by applying same row number to both the labels.
<GridLayout rows="auto" columns="*">
<Label row="0" horizontalAlignment="center" text="Center me" class="center"></Label>
<Label row="0" horizontalAlignment="right" text="Pull me to the right" class="right"></Label>
</GridLayout>
you can also set horizontalAlignment property from CSS by using horizontal-align attribute.
.center{
horizontal-align:center;
}
.right{
horizontal-align:right;
}
main trick is that you have to give same row number to labels so that they overlap each other.