JustifyContent

API Reference: UI.FlexLayout.JustifyContent

The JustifyContent property describes how to align children within the main axis of a container.

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.CENTER
})
this.layout.addChild(myFlexLayout);
var label1 = new Label({
width: 80,
height: 80,
text: "1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
width: 80,
height: 80,
text: "2",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#8f44ad")
})
var label3 = new Label({
width: 80,
height: 80,
text: "3",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#16a086")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
}
);
module.exports = Page1;

JustifyContent.CENTER

JustifyContent.FLEX_END

JustifyContent.FLEX_START

JustifyContent.SPACE_AROUND

JustifyContent.SPACE_BETWEEN