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:
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 |
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. |
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 |
direction | sap.m.FlexDirection | Row | Determines the direction of the layout of child elements. Visibility: public |
displayInline | boolean | false | Determines whether the |
fitContainer | boolean | false | Determines whether the |
height | sap.ui.core.CSSSize | empty string | The height of the |
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). |
width | sap.ui.core.CSSSize | empty string | The width of the |
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. |
Default Aggregation: items
Name | Cardinality | Type | Description |
---|---|---|---|
items (default) | 0..n | sap.ui.core.Control |
Flex items within the flexible box layout |
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
|
getAccessibilityInfo |
Gets the accessibility information.
|
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 |
getAlignItems |
Gets current value of property alignItems. Determines the layout behavior of items along the cross-axis. Default value is |
getBackgroundDesign |
Gets current value of property backgroundDesign. Defines the background style of the Default value is |
getDirection |
Gets current value of property direction. Determines the direction of the layout of child elements. Default value is |
getDisplayInline |
Gets current value of property displayInline. Determines whether the Default value is |
getFitContainer |
Gets current value of property fitContainer. Determines whether the Default value is |
getHeight |
Gets current value of property height. The height of the Default value is |
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 |
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). Default value is |
getWidth |
Gets current value of property width. The width of the Default value is |
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 |
indexOfItem |
Checks for the provided |
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 Default value is |
setAlignItems |
Sets a new value for property alignItems. Determines the layout behavior of items along the cross-axis. When called with a value of Default value is |
setBackgroundDesign |
Sets a new value for property backgroundDesign. Defines the background style of the When called with a value of Default value is |
setDirection |
Sets a new value for property direction. Determines the direction of the layout of child elements. When called with a value of Default value is |
setDisplayInline |
Sets a new value for property displayInline. Determines whether the When called with a value of Default value is |
setFitContainer |
Sets a new value for property fitContainer. Determines whether the When called with a value of Default value is |
setHeight |
Sets a new value for property height. The height of the When called with a value of Default value is |
setJustifyContent |
Sets a new value for property justifyContent. Determines the layout behavior along the main axis. When called with a value of Default value is |
setRenderType |
Sets the render type of the FlexBox. |
setWidth |
Sets a new value for property width. The width of the When called with a value of Default value is |
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 Default value is |
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 |
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 |
Gets the accessibility information.
References:
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
.
Gets current value of property alignItems.
Determines the layout behavior of items along the cross-axis.
Default value is Stretch
.
Gets current value of property backgroundDesign.
Defines the background style of the sap.m.FlexBox
.
Default value is Transparent
.
Gets current value of property direction.
Determines the direction of the layout of child elements.
Default value is Row
.
Gets current value of property displayInline.
Determines whether the sap.m.FlexBox
is in block or inline mode.
Default value is false
.
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
.
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
.
Gets current value of property justifyContent.
Determines the layout behavior along the main axis.
Default value is Start
.
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
.
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
.
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
.
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 |
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 |
Removes all the controls from the aggregation items.
Additionally, it unregisters them from the hosting UIArea.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Sets the render type of the FlexBox.
Param | Type | DefaultValue | Description |
---|---|---|---|
sValue | string |
Render type in string format. |
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 |
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 |