Working with General Visual Components > Components > FlexLayout > Example of Creating the FlexLayout Component

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: