> [Wiki](Home) ▸ [[API Reference|API-Reference]] ▸ [[Renderer|Renderer-API]] ▸ **Flow**
# Flow
```javascript
Flow {
width: 90
spacing.column: 15
spacing.row: 5
Rectangle { color: 'blue'; width: 60; height: 50; }
Rectangle { color: 'green'; width: 20; height: 70; }
Rectangle { color: 'red'; width: 50; height: 30; }
Rectangle { color: 'yellow'; width: 20; height: 20; }
}
```
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee)
## Table of contents
* [Flow](#flow)
* [**Class** Flow](#class-flow)
* [New](#new)
* [padding](#padding)
* [onPaddingChange](#onpaddingchange)
* [spacing](#spacing)
* [onSpacingChange](#onspacingchange)
* [alignment](#alignment)
* [onAlignmentChange](#onalignmentchange)
* [includeBorderMargins](#includebordermargins)
* [onIncludeBorderMarginsChange](#onincludebordermarginschange)
* [collapseMargins](#collapsemargins)
* [onCollapseMarginsChange](#oncollapsemarginschange)
* [Glossary](#glossary)
#**Class** Flow
- Syntax
**Class** Flow : *Item*- Extends
- Item
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#class-flow--item)
##New
- Syntax
*Flow* Flow.New([*Component* component, *Object* options])- Static method of
- Flow
- Parameters
- component — Component — optional
- options — Object — optional
- Returns
- Flow
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#flow-flownewcomponent-component-object-options)
##padding
- Syntax
*Item.Margin* Flow::padding- Prototype property of
- Flow
- Type
- Item.Margin
##onPaddingChange
- Syntax
*Signal* Flow::onPaddingChange(*Item.Margin* padding)- Prototype method of
- Flow
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#signal-flowonpaddingchangeitemmargin-padding)
##spacing
- Syntax
*Item.Spacing* Flow::spacing- Prototype property of
- Flow
- Type
- Item.Spacing
##onSpacingChange
- Syntax
*Signal* Flow::onSpacingChange(*Item.Spacing* oldValue)- Prototype method of
- Flow
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#signal-flowonspacingchangeitemspacing-oldvalue)
##alignment
- Syntax
*Item.Alignment* Flow::alignment- Prototype property of
- Flow
- Type
- Item.Alignment
##onAlignmentChange
- Syntax
*Signal* Flow::onAlignmentChange(*Item.Alignment* oldValue)- Prototype method of
- Flow
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#signal-flowonalignmentchangeitemalignment-oldvalue)
##includeBorderMargins
- Syntax
*Boolean* Flow::includeBorderMargins = `false`- Prototype property of
- Flow
- Type
- Boolean
- Default
false
##onIncludeBorderMarginsChange
- Syntax
*Signal* Flow::onIncludeBorderMarginsChange(*Boolean* oldValue)- Prototype method of
- Flow
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#signal-flowonincludebordermarginschangeboolean-oldvalue)
##collapseMargins
- Syntax
*Boolean* Flow::collapseMargins = `false`- Prototype property of
- Flow
- Type
- Boolean
- Default
false
##onCollapseMarginsChange
- Syntax
*Signal* Flow::onCollapseMarginsChange(*Boolean* oldValue)- Prototype method of
- Flow
- Parameters
- Type
- Signal
> [`Source`](/Neft-io/neft/blob/564f8d734f4e3d2b9c5aa3d8f0b6cad0c8b3f9f0/src/renderer/types/layout/flow.litcoffee#signal-flowoncollapsemarginschangeboolean-oldvalue)
# Glossary
- [Flow](#class-flow)