class sap.m.FlexBox

Control sample: sap.m.FlexBox
Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/m/FlexBox
Application Component: CA-UI5-CTR

The sap.m.FlexBox control builds the container for a flexible box layout.

Note: Be sure to check the renderType setting to avoid issues due to browser inconsistencies.

Documentation links:

This control can be a drop target.

Constructor

Constructor for a new sap.m.FlexBox.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.m.FlexBox(sId?, mSettings?)
Param Type Default Value Description
sId? string

id for the new control, generated automatically if no id is given

mSettings? object

initial settings for the new control


Properties

Name Type Default Value Description
alignContent sap.m.FlexAlignContent Stretch

Determines the layout behavior of container lines when there's extra space along the cross-axis.

Since: 1.36.0.

Visibility: public
alignItems sap.m.FlexAlignItems Stretch

Determines the layout behavior of items along the cross-axis.

Visibility: public
backgroundDesign sap.m.BackgroundDesign Transparent

Defines the background style of the sap.m.FlexBox.

Since: 1.38.5.

Visibility: public
direction sap.m.FlexDirection Row

Determines the direction of the layout of child elements.

Visibility: public
displayInline boolean false

Determines whether the sap.m.FlexBox is in block or inline mode.

Visibility: public
fitContainer boolean false

Determines whether the sap.m.FlexBox will be sized to completely fill its container. If the sap.m.FlexBox is inserted into a Page, the property 'enableScrolling' of the Page needs to be set to 'false' for the FlexBox to fit the entire viewport.

Visibility: public
height sap.ui.core.CSSSize empty string

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

Since: 1.9.1.

Visibility: public
justifyContent sap.m.FlexJustifyContent Start

Determines the layout behavior along the main axis.

Visibility: public
renderType sap.m.FlexRendertype Div

Determines whether the layout is rendered as a series of divs or as an unordered list (ul).

We recommend to use Bare in most cases to avoid layout issues due to browser inconsistencies.

Visibility: public
width sap.ui.core.CSSSize empty string

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

Since: 1.9.1.

Visibility: public
wrap sap.m.FlexWrap NoWrap

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

Since: 1.36.0.

Visibility: public

Aggregations

Default Aggregation: items

Name Cardinality Type Description
items (default) 0..n sap.ui.core.Control

Flex items within the flexible box layout


Methods Overview

Method Description
addItem

Adds some item to the aggregation items.

destroyItems

Destroys all the items in the aggregation items.

sap.m.FlexBox.extend

Creates a new subclass of class sap.m.FlexBox with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

getAccessibilityInfo

Gets the accessibility information.

References:

  • sap.ui.core.Control#getAccessibilityInfo

getAlignContent

Gets current value of property alignContent.

Determines the layout behavior of container lines when there's extra space along the cross-axis.

Default value is Stretch.

getAlignItems

Gets current value of property alignItems.

Determines the layout behavior of items along the cross-axis.

Default value is Stretch.

getBackgroundDesign

Gets current value of property backgroundDesign.

Defines the background style of the sap.m.FlexBox.

Default value is Transparent.

getDirection

Gets current value of property direction.

Determines the direction of the layout of child elements.

Default value is Row.

getDisplayInline

Gets current value of property displayInline.

Determines whether the sap.m.FlexBox is in block or inline mode.

Default value is false.

getFitContainer

Gets current value of property fitContainer.

Determines whether the sap.m.FlexBox will be sized to completely fill its container. If the sap.m.FlexBox is inserted into a Page, the property 'enableScrolling' of the Page needs to be set to 'false' for the FlexBox to fit the entire viewport.

Default value is false.

getHeight

Gets current value of property height.

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

Default value is empty string.

getItems

Gets content of aggregation items.

Flex items within the flexible box layout

getJustifyContent

Gets current value of property justifyContent.

Determines the layout behavior along the main axis.

Default value is Start.

sap.m.FlexBox.getMetadata

Returns a metadata object for class sap.m.FlexBox.

getRenderType

Gets current value of property renderType.

Determines whether the layout is rendered as a series of divs or as an unordered list (ul).

We recommend to use Bare in most cases to avoid layout issues due to browser inconsistencies.

Default value is Div.

getWidth

Gets current value of property width.

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

Default value is empty string.

getWrap

Gets current value of property wrap.

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

Default value is NoWrap.

indexOfItem

Checks for the provided sap.ui.core.Control in the aggregation items. and returns its index if found or -1 otherwise.

insertItem

Inserts a item into the aggregation items.

removeAllItems

Removes all the controls from the aggregation items.

Additionally, it unregisters them from the hosting UIArea.

removeItem

Removes a item from the aggregation items.

setAlignContent

Sets a new value for property alignContent.

Determines the layout behavior of container lines when there's extra space along the cross-axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Stretch.

setAlignItems

Sets a new value for property alignItems.

Determines the layout behavior of items along the cross-axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Stretch.

setBackgroundDesign

Sets a new value for property backgroundDesign.

Defines the background style of the sap.m.FlexBox.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Transparent.

setDirection

Sets a new value for property direction.

Determines the direction of the layout of child elements.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Row.

setDisplayInline

Sets a new value for property displayInline.

Determines whether the sap.m.FlexBox is in block or inline mode.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

setFitContainer

Sets a new value for property fitContainer.

Determines whether the sap.m.FlexBox will be sized to completely fill its container. If the sap.m.FlexBox is inserted into a Page, the property 'enableScrolling' of the Page needs to be set to 'false' for the FlexBox to fit the entire viewport.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

setHeight

Sets a new value for property height.

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

setJustifyContent

Sets a new value for property justifyContent.

Determines the layout behavior along the main axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Start.

setRenderType

Sets the render type of the FlexBox.

setWidth

Sets a new value for property width.

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

setWrap

Sets a new value for property wrap.

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is NoWrap.

addItem

Adds some item to the aggregation items.

Param Type DefaultValue Description
oItem sap.ui.core.Control

The item to add; if empty, nothing is inserted

destroyItems

Destroys all the items in the aggregation items.

sap.m.FlexBox.extend

Creates a new subclass of class sap.m.FlexBox with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

getAccessibilityInfo

Gets the accessibility information.

References:

getAlignContent

Gets current value of property alignContent.

Determines the layout behavior of container lines when there's extra space along the cross-axis.

Default value is Stretch.

getAlignItems

Gets current value of property alignItems.

Determines the layout behavior of items along the cross-axis.

Default value is Stretch.

getBackgroundDesign

Gets current value of property backgroundDesign.

Defines the background style of the sap.m.FlexBox.

Default value is Transparent.

getDirection

Gets current value of property direction.

Determines the direction of the layout of child elements.

Default value is Row.

getDisplayInline

Gets current value of property displayInline.

Determines whether the sap.m.FlexBox is in block or inline mode.

Default value is false.

getFitContainer

Gets current value of property fitContainer.

Determines whether the sap.m.FlexBox will be sized to completely fill its container. If the sap.m.FlexBox is inserted into a Page, the property 'enableScrolling' of the Page needs to be set to 'false' for the FlexBox to fit the entire viewport.

Default value is false.

getHeight

Gets current value of property height.

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

Default value is empty string.

getItems

Gets content of aggregation items.

Flex items within the flexible box layout

getJustifyContent

Gets current value of property justifyContent.

Determines the layout behavior along the main axis.

Default value is Start.

sap.m.FlexBox.getMetadata

Returns a metadata object for class sap.m.FlexBox.

getRenderType

Gets current value of property renderType.

Determines whether the layout is rendered as a series of divs or as an unordered list (ul).

We recommend to use Bare in most cases to avoid layout issues due to browser inconsistencies.

Default value is Div.

getWidth

Gets current value of property width.

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

Default value is empty string.

getWrap

Gets current value of property wrap.

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

Default value is NoWrap.

indexOfItem

Checks for the provided sap.ui.core.Control in the aggregation items. and returns its index if found or -1 otherwise.

Param Type DefaultValue Description
oItem sap.ui.core.Control

The item whose index is looked for

insertItem

Inserts a item into the aggregation items.

Param Type DefaultValue Description
oItem sap.ui.core.Control

The item to insert; if empty, nothing is inserted

iIndex int

The 0-based index the item should be inserted at; for a negative value of iIndex, the item is inserted at position 0; for a value greater than the current size of the aggregation, the item is inserted at the last position

removeAllItems

Removes all the controls from the aggregation items.

Additionally, it unregisters them from the hosting UIArea.

removeItem

Removes a item from the aggregation items.

Param Type DefaultValue Description
vItem int string sap.ui.core.Control

The item to remove or its index or id

setAlignContent

Sets a new value for property alignContent.

Determines the layout behavior of container lines when there's extra space along the cross-axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Stretch.

Param Type DefaultValue Description
sAlignContent sap.m.FlexAlignContent Stretch

New value for property alignContent

setAlignItems

Sets a new value for property alignItems.

Determines the layout behavior of items along the cross-axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Stretch.

Param Type DefaultValue Description
sAlignItems sap.m.FlexAlignItems Stretch

New value for property alignItems

setBackgroundDesign

Sets a new value for property backgroundDesign.

Defines the background style of the sap.m.FlexBox.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Transparent.

Param Type DefaultValue Description
sBackgroundDesign sap.m.BackgroundDesign Transparent

New value for property backgroundDesign

setDirection

Sets a new value for property direction.

Determines the direction of the layout of child elements.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Row.

Param Type DefaultValue Description
sDirection sap.m.FlexDirection Row

New value for property direction

setDisplayInline

Sets a new value for property displayInline.

Determines whether the sap.m.FlexBox is in block or inline mode.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Param Type DefaultValue Description
bDisplayInline boolean false

New value for property displayInline

setFitContainer

Sets a new value for property fitContainer.

Determines whether the sap.m.FlexBox will be sized to completely fill its container. If the sap.m.FlexBox is inserted into a Page, the property 'enableScrolling' of the Page needs to be set to 'false' for the FlexBox to fit the entire viewport.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Param Type DefaultValue Description
bFitContainer boolean false

New value for property fitContainer

setHeight

Sets a new value for property height.

The height of the sap.m.FlexBox. Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

Param Type DefaultValue Description
sHeight sap.ui.core.CSSSize ''

New value for property height

setJustifyContent

Sets a new value for property justifyContent.

Determines the layout behavior along the main axis.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Start.

Param Type DefaultValue Description
sJustifyContent sap.m.FlexJustifyContent Start

New value for property justifyContent

setRenderType

Sets the render type of the FlexBox.

Param Type DefaultValue Description
sValue string

Render type in string format.

setWidth

Sets a new value for property width.

The width of the sap.m.FlexBox. Note that when a percentage is given, for the width to work as expected, the width of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is empty string.

Param Type DefaultValue Description
sWidth sap.ui.core.CSSSize ''

New value for property width

setWrap

Sets a new value for property wrap.

Determines the wrapping behavior of the flex container. This property has no effect in older browsers, e.g. Android Native 4.3 and below.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is NoWrap.

Param Type DefaultValue Description
sWrap sap.m.FlexWrap NoWrap

New value for property wrap