Flexbox

Overview

The Flexbox layout containers are using the CSS3 Flexbox layout model; Flexbox is a one-dimensional layout method for arranging items in either rows or columns. The Flexbox layout involves a container (Flex Container) and one or more children (Flex Item). There are several properties which can be set in either the parent Flex Container or the Flex Item children using the Servoy properties view in the IDE.

Flex-Container

It is the parent container of the Flexbox layout. It comes already with 3 Flex Item children; you can further add or remove any Flex Item.

You can modify the layout using it's 3 unique properties:

• data-direction: determines if the flex items in it should be arranged as rows or columns.

• data-align-items: determines how the flex items are laid along the flex container.

• data-justify-content: determines how the available space should be distributed among the flex items.

Constraints : Can contain only Flex Item.

Flex Container

Below an example of flex container with data-justify-content set to space-around.

Flex Justify Spec

Flex Justify

Create a Flex-Container

Create a Flex Container

These are the steps for creating a Flex Container:

1. Open the Form Editor of your responsive form
2. Find Flex Container in Flex CSS subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the Flex Container component in:

   • empty space of the form, as an independent component

   • inside any other container components, except Container, Row
4. Edit the existing Flex Items; you can further add or remove any Flex Item

Flex-Item

Flex items can be dropped into flex containers. As the flex containers, each flex item has its own set of unique properties used to determine how the item is layout within its container.

• data-align-items: determines how the flex items are laid along the flex container.

• data-grow: determines the ability of the item to grow, relatively to other flex items, when there is more space available.

• data-shrink: determines the ability of the item to shrink, relatively to other flex items, when necessary.

In the example below the first item from the left doesn't grow since has flex-grow=0. The middle item has flex-grow=1, the last item has the flex-grow=2 therefore grows twice as much of the middle flex item.

Flex Item Grow

Flex Item Spec

Create a Flex-Item

Create a Flex Item

These are the steps for creating a Flex Item:

1. Open the Form Editor of your responsive form
2. Find Flex Item in Flex CSS subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the Flex Item component in:

   • empty space of the form, as an independent component

   • inside a Flex Container
4. Edit the Flex Item and add other needed components inside

Flexbox Layout

Overview

The flexbox layout divides the available height in 3 vertical sections, header, content and footer. The header and the footer section will grow in height depending on their content while the content section will take all the remaining height and show a scrollbar if the content doesn't fit.

IMPORTANT! The Flexbox layout is using the CSS3 Flexbox layout model. Now days the Flexbox model is largely supported from modern browsers (see supported browsers). However there are few known issues with IE and Safari (open the Known issues tab).

Flexbobx Layout

Getting Started

You can drop Servoy any Servoy Web Components and nest other 12Grid containers into the header, footer and content section.

You may decide to leave empty the header or footer section, not necessarily you need to use these section; however you may use at least one of these 2 sections; otherwise you may not use this container at all since there is no benefit on using only the content section.

IMPORTANT! The parent container of the flexbox layout MUST have a known height, the flexbox layout is not useful at all if the height of it's top container is 'auto' (which is an unknown value). In case the parent container of the flexbox layout is the Servoy form itself, add a CSS styleClass to the form which will let the form use 100% of the available height.

IMPORTANT! if the form is nested within another form via a tab/tabless panel, the panel MUST have a known height as well, so that the inner form can use 100% of the panel height.

Flexbobx Layout

Flexbox Layout Outline

Create a Flex Layout

Create a Flex Layout

These are the steps for creating a Flex Layout:

1. Open the Form Editor of your responsive form
2. Find Flex Layout in Templates subsection of the Bootstrap 12-Grid section in the components' pallet

3. Drag and drop the Flex Layout component in:

   • empty space of the form, as an independent component

   • inside any other container components, except Container, Row
4. Edit the header, footer and content sections of the Flex Layout and add other needed components inside

Flexbox Layout and Table Components

When a Servoy Table Component from the Bootstrap components package or from the Servoy Extra Components package or from the Servoy NG Grids package is placed within the content section of the flexbox layout as direct child, the table height will use 100% of the available height if the responsiveHeight property is set to 0.

NOTE for the Table component from the Servoy Extra package the property responsiveDynamicHeight, should be set to false if you wish to use all the available height of the content section; if the responsiveDynamicHeight is set to true the Table will have a max-height equal to the design responsiveHeight property of the Table; the max-height may be smaller than the available height resulting in unused space.

If instead you prefer to use the design height of the Table component, wrap the Table component within a different 12Grid container. However letting the table use a different height than the available height in the content section may result in bad UX for the User since may result in double vertical scrollbars.

Nesting Flexbox Layout

You can nest multiple FlexLayout within the content section to sub-divide the available height of the content section.

FlexBox Layout Nested

FlexBox Layout Nested Outline

In the sample above the available height of the first flexbox layout content is divided in 2 blocks of 50% height using the custom styleClass half-size.

.half-size {
	height: 50%;
}

Flexbox Layout and tab/tablesspanel

If you include a tab panel or tabless panel into the content section and you would like to let the panel use all the available height of the content section add a CSS styleClass to the tab panel or tabless panel component to let the panel use 100% of the height.