# Flexbox
## Overview
The Flexbox layout containers are using the CSS3 [Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) model; Flexbox is a one-dimensional layout method for arranging items in either rows or columns.\
The Flexbox layout involves a container ([Flex Container](#flex-container)) and one or more children ([Flex Item](#flex-item)). There are several properties which can be set in either the parent [Flex Container](#flex-container) or the [Flex Item](#flex-item) children using the [Servoy properties](https://github.com/Servoy/gitbook/blob/master/guides/develop/application-design/forms/layout-management/fully-responsive/broken-reference/README.md) view in the IDE.
## Flex-Container
It is the parent container of the [Flexbox layout](#flexbox-layout). It comes already with 3 [Flex Item](#flex-item) children; you can further add or remove any [Flex Item](#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-item).
Below an example of flex container with data-justify-content set to space-around.
### Create a Flex-Container
Create a Flex Container
These are the steps for creating a Flex Container:
1. Open the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) 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](/guides/develop/application-design/forms/layout-management/home/b12grid.md#container), [Row](/guides/develop/application-design/forms/layout-management/home/b12grid.md#row)
4. Edit the existing [Flex Items](#flex-item); you can further add or remove any [Flex Item](#flex-item)
## Flex-Item
Flex items can be dropped into [flex containers](#flex-container). 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.
### Create a Flex-Item
Create a Flex Item
These are the steps for creating a Flex Item:
1. Open the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) 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](#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.
{% hint style="info" %}
**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](https://caniuse.com/#feat=flexbox)). However there are few known issues with IE and Safari (open the [Known issues](https://caniuse.com/#feat=flexbox) tab).
{% endhint %}
## 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.
{% hint style="info" %}
**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.
{% endhint %}
{% hint style="info" %}
**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.
{% endhint %}
## Create a Flex Layout
Create a Flex Layout
These are the steps for creating a Flex Layout:
1. Open the [Form Editor](/reference/servoy-developer/object-editors/form-editor.md) 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](/guides/develop/application-design/forms/layout-management/home/b12grid.md#container), [Row](/guides/develop/application-design/forms/layout-management/home/b12grid.md#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](https://github.com/Servoy/bootstrapcomponents) package or from the [Servoy Extra Components](/guides/develop/application-design/data-modeling/databases/tables.md) 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](/guides/develop/application-design/data-modeling/databases/tables.md) 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](/guides/develop/application-design/data-modeling/databases/tables.md) 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](/guides/develop/application-design/data-modeling/databases/tables.md) component, wrap the [Table](/guides/develop/application-design/data-modeling/databases/tables.md) 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.
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`.
```css
.half-size {
height: 50%;
}
```
### Flexbox Layout and tab/tablesspanel
If you include a [tab panel](/guides/develop/application-design/forms/form-containers/tab-panel.md) 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](/guides/develop/application-design/forms/form-containers/tab-panel.md) or tabless panel component to let the panel use 100% of the height.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.servoy.com/guides/develop/application-design/forms/layout-management/home/flexbox.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.