Example of Creating the FlexLayout Component

To execute the example, the HTML page must contain links to PP.js script file and to PP.css styles file, in the <body> tag of the HTML document of the <div> item with flexLayout identifier. In the onload event of the <body> tag it is necessary to specify the call of the createFlexLayout() function. Add a flexible layout of items in the container on the page. Add three buttons in the container:

var flexLayout;
// Add a flexible layout of items
function createFlexLayout() {
    flexLayout = new PP.Ui.FlexLayout({
        // Set parent item
        ParentNode: document.getElementById("flexLayout"),
        // Add several buttons
        Items: [{ Content: new PP.Ui.Button({ Content: "Button 1" }), Width: 75, Height: 20 },
                { Content: new PP.Ui.Button({ Content: "Button 2" }), Width: 75, Height: 20 },
                { Content: new PP.Ui.Button({ Content: "Button 3" }), Width: 75, Height: 20 }],
        // Set sizes
        Width: 139,
        Height: 65
    });
}

As a result container with three buttons is created:

Change items position in the container by setting right alignment:

// Set right alignment
flexLayout.setPosition({Pack: "Start", Align: "Right", Flex: "None"});
// Update layout
flexLayout.updateLayout();

As a result items will be aligned on the right edge of the container: