Flex Layout is a container component that allows users to rearrange and resize content modules called panels within the viewport height.
Flex Layout is a container with flexible panels. Panels within a Flex Layout have three variations — with title and tabs, with tabs or with title. Tabs enable panels to contain a number of different conceptually related content elements, viewed one at a time in the same panel container.
Within a layout, panels may be moved to create any number of arrangements. Panels can be moved by grabbing the header with your mouse, dragging and dropping into a new location. A blue outline will appear within the layout showing approximately where the panel will appear when dropped. Flex Layout may also be configured to disable moving and fix the locations of the panels.
Panels may also be resized to take up the entirety of the layout by clicking the resize icon, or by double clicking on the title bar. Resizing is temporary and clicking the resize icon toggle in the enlarged state will restore the panel to its previous size and location.
Tabs can be moved within a panel or moved from one panel to another. Tabs are moved by grabbing the tab container and dragging and dropping to the new desired location. A blue highlight will show to indicate where a dropped tab will appear. Additionally a tab can be moved to a newly created panel by dropping it in between or alongside other panels.
Tabs can be set to be dismissible. This will allow the user to remove the tab from the display by clicking the close icon to the right of the tab name. Once dismissed, a tab cannot be recovered. Removing the last tab from a panel will remove the panel as well.
Tabs may be docked to the left, right, or the bottom of the layout container by grabbing a tab name and dropping it near the edge of the layout. Tabs that have been docked may be moved back into a panel by dragging and dropping to the former location.
If more tabs are included in the panel than can be shown in the horizontal space allotted, then an overflow menu will appear. When a tab is selected from the overflow menu, it will replace the last visible tab in the tab set.
Panel titles and tabs may be showin in large, medium and small sizes. The sizing affects the text on the tabs and the title bar, and the height of the tab and title bar.