Box

A layout that applies display: flex to the contentElement of its container to layout child items. This defaults to a horizontal layout of items, also known as an 'hbox'.

 layout : {
     type : 'box'   // or equivalently, 'hbox'
 }

Configs

10
align: String= 'stretch'

Sets the align-items style of the owner's contentElement.

contentAlign: String= 'normal'

Sets the align-content style of the owner's contentElement.

gap: Number | StringAlso a property

The amount of gap between the element of child items.

horizontal: Boolean

Set this value to false to set the flex-direction style of the owner's contentElement to column. Or alternatively, set vertical to true.

justify: String= 'flex-start'

Sets the justify-content style of the owner's contentElement.

reverse: Boolean= false

Set this value to true to add '-reverse' to the flex-direction style of the owner's contentElement. This config combines with horizontal or vertical to set the flex-direction style.

vertical: Boolean= false

Set this value to true to set the flex-direction style of the owner's contentElement to column. Or alternatively, set horizontal to false.

wrap: String | Boolean= false

Sets the flex-wrap style of the owner's contentElement.

The value of true is equivalent to 'wrap', false is equivalent to 'nowrap', and 'reverse' is equivalent to 'wrap-reverse'.

 layout : {
     type : 'box',
     wrap : false        // equivalent to 'nowrap'
     wrap : true         // equivalent to 'wrap'
     wrap : 'reverse'    // equivalent to 'wrap-reverse'
 }
containerClsLayout
itemClsLayout

Properties

4

Class hierarchy

isBox: Boolean= truereadonly
Identifies an object as an instance of Box class, or subclass thereof.
isBox: Boolean= truereadonlystatic
Identifies an object as an instance of Box class, or subclass thereof.

Other

gap: Number | StringAlso a config

The amount of gap between the element of child items.

ownerLayout