AlignSelf

API Reference: UI.FlexLayout.AlignSelf

This allows the default alignment (or the ones specified by AlignItems) to be overridden for individual FlexLayout items.

If any of the items' cross-axis margin is set to auto, then AlignSelf is ignored.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const FlexLayout = require('sf-core/ui/flexlayout');
const Color = require('sf-core/ui/color');
const TextAlignment = require('sf-core/ui/textalignment');
const Label = require('sf-core/ui/label');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
var myFlexLayout = new FlexLayout({
top: 0,
left: 0,
bottom: 0,
right: 0,
backgroundColor: Color.WHITE,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
justifyContent: FlexLayout.JustifyContent.SPACE_BETWEEN,
alignItems: FlexLayout.AlignItems.CENTER
})
this.layout.addChild(myFlexLayout);
var label1 = new Label({
width: 50,
height: 50,
alignSelf: FlexLayout.AlignSelf.AUTO,
text: "auto",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
width: 50,
height: 50,
alignSelf: FlexLayout.AlignSelf.FLEX_START,
text: "flex start",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
width: 50,
height: 50,
alignSelf: FlexLayout.AlignSelf.FLEX_END,
text: "flex end",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
var label4 = new Label({
width: 50,
height: 50,
alignSelf: FlexLayout.AlignSelf.CENTER,
text: "center",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#f1c40f")
})
var label5 = new Label({
width: 50,
alignSelf: FlexLayout.AlignSelf.STRETCH,
text: "stretch",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#e77e23")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
myFlexLayout.addChild(label4);
myFlexLayout.addChild(label5);
}
);
module.exports = Page1;