FlexDirection

API Reference: UI.FlexLayout.FlexDirection

The FlexDirection property controls the direction in which children are laid out. It specifies how children will be placed (horizontally or vertically) in FlexLayout and controls the main axis.

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;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myFlexLayout = new FlexLayout({
top: 0,
left: 0,
bottom: 0,
right: 0,
positionType: FlexLayout.PositionType.ABSOLUTE,
flexDirection: FlexLayout.FlexDirection.ROW,
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: 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")
})
myFlexLayout.addChild(label1);
myFlexLayout.addChild(label2);
myFlexLayout.addChild(label3);
myFlexLayout.addChild(label4);
}
);
module.exports = Page1;

FlexDirection.ROW

FlexDirection.COLUMN

FlexDirection.ROW_REVERSE

FlexDirection.COLUMN_REVERSE