AlignContent

API Reference: UI.FlexLayout.AlignContent

The AlignContent property is used to control how multiple lines of content are aligned within a container.

Tip

This property has no effect on single line FlexLayout items.

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,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
flexWrap: FlexLayout.FlexWrap.WRAP,
alignContent: FlexLayout.AlignContent.AUTO,
backgroundColor: Color.WHITE
})
this.layout.addChild(myFlexLayout);
var label1 = new Label({
width: 100,
height: 80,
text: "1",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2a80b9")
})
var label2 = new Label({
width: 100,
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")
})
var label4 = new Label({
width: 80,
height: 80,
text: "4",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#f1c40f")
})
var label5 = new Label({
width: 80,
height: 80,
text: "5",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#e77e23")
})
var label6 = new Label({
width: 80,
height: 80,
text: "6",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#2d3e50")
})
var label7 = new Label({
width: 80,
height: 80,
text: "7",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#c1392b")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
myFlexLayout.addChild(label4);
myFlexLayout.addChild(label5);
myFlexLayout.addChild(label6);
myFlexLayout.addChild(label7);
}
);
module.exports = Page1;

AlignContent.AUTO

AlignContent.CENTER

AlignContent.FLEX_START

AlignContent.FLEX_END

AlignContent.STRETCH