AlignItems

API Reference: UI.FlexLayout.AlignItems

AlignItems defines the default behavior for how flex items are laid out along the cross axis on the current line. You can think of it as the JustifyContent version for the cross-axis (perpendicular to the main-axis).

Tip

If there is only one line of FlexLayout items, AlignItems would show a two directional effect. It aligns these items respective to each other and to FlexLayout!

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 Page1(_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,
alignItems: FlexLayout.AlignItems.CENTER,
backgroundColor: Color.WHITE
})
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: 60,
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: 100,
text: "4",
textAlignment: TextAlignment.MIDCENTER,
backgroundColor: Color.create("#f1c40f")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
myFlexLayout.addChild(label4);
}
);
module.exports = Page1;

AlignItems.CENTER

AlignItems.FLEX_START

AlignItems.FLEX_END

AlignItems.STRETCH

Using AlignItems.STRETCH needs not be set height property of object