Flex Layout

Flex Layout is a container component that allows users to rearrange and resize content modules called panels within the viewport height.

flex layout
flex layout anatomy
  1. Panel
  2. Panel Title
  3. Panel Tab, selected
  4. Panel Tab, enabled
  5. Resize Icon Toggle
  6. Docked Tab

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.

flex layout variations

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.

flex layout panel move

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.

flex layout panel resize

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.

flex layout tab move

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.

flex layout dismissible

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.

flex layout tab docking

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.

flex layout overflow

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.

flex layout sizes
  • Use the minimum number of panels that can accomodate your data or content.  An overly crowded layout will impede legibility.
  • If the content within a panel is relatively simple, a tab-less panel should be used. 
  • Best practice is to use titles for all panels, however, title can be omitted when spacing is tight.