# \<Flow\> and \<FlowItem\>

**\<Flow/\>**arrange all direct children**\<FlowItem/\>**compositions in multiple rows with auto line wrapping.

**\<FlowItem/\>**::MinSizeLimitation is**LimitToElementAndChildren**by default.

## Properties

A few more properties are provided by**\<Flow/\>**and**\<FlowItem/\>**to control the details of how to ordering**\<FlowItem/\>**.

**\<FlowItem/\>**is not a**\<Bounds/\>**, there is no writable**ExpectedBounds**and**AlignmentToParent**in**\<FlowItem/\>**.

### \<Flow\>::Axis

The default value is**\<DefaultAxis/\>**, which equivalents to**\<Axis AxisDirection="RightDown"/\>**.

**LeftDown**,**RightDown**,**LeftUp**,**RightUp**,**DownLeft**,**DownRight**,**UpLeft**and**UpRight**are all valid values for the**AxisDirection**property.

Among these values, the first word describes the direction how**\<FlowItem/\>**are line up one by one, the second word describes the direction how auto line wrapping does. For example,**RightDown**means the next item is put on the**right**side of the previous item, and when there is no more space for this item in the current row, it creates a new row on the**down**side of the current row.

### \<Flow\>::Alignment

The default value is**Left**.

**Left**,**Center**,**Right**and**Extend**are all valid values for the this property.

This property describes how**\<FlowItem/\>**are positioned in one row.

### \<Flow\>::RowPadding and \<Flow\>::ColumnPadding

The default value is 0.

This property keeps an distance between each**\<FlowItem/\>**.

**IMPORTANT**:**Row**here doesn't necessary mean a line in horizontal direction, it depends on the value of the**Axis**property.

### \<Flow\>::ExtraMargin

The default value is 0 for all its components.

This property keeps an distance between**\<Flow/\>**and**\<FlowItem/\>**.

### \<FlowItem\>::ExtraMargin

The default value is 0 for all its components.

This property adds a border to a**\<FlowItem/\>**.

**IMPORTANT**:**ExtraMargin**does not affect how**other \<FlowItem/\>**is positioned. Instead, after the position of a**\<FlowItem/\>**is decided,**ExtraMargin**kicks in and add a border to enlarge it.

Adding an**ExtraMargin**to a**\<FlowItem/\>**does not increase the minimum size of its parent**\<Flow/\>**.

### \<FlowItem\>::FlowOption

The default value is**baseline:FromBottom distance:0**.

This property describes how**\<FlowItem/\>**are positioned in one row.

**baseline**could be**FromTop**,**FromBottom**or**Percentage**:
- **FromTop**: the**\<FlowItem/\>**keeps the**distance**from the top of the row.
- **FromBottom**: the**\<FlowItem/\>**keeps the**distance**from the bottom of the row.
- **Percentage**: the**\<FlowItem/\>**keeps the distahce, which is**pencentage**of its height, from the top of the row.

**IMPORTANT**:**Top**here doesn't necessary mean the top border of a row, it depends on the value of the**Axis**property.

## Adding Flow Items

### \<Flow\>::Children()

When a new**\<FlowItem/\>**is added to**\<Flow/\>**as a child, this**\<FlowItem/\>**is always appended to the end of the last row, regardless of its position in**\<Flow\>::Children**.

### \<Flow\>::InsertFlowItem(index, item)

To control the position of a**\<FlowItem/\>**in the auto-wrapped line, call**\<Flow\>::InsertFlowItem()**instead of**\<Flow\>::Children()**.

This function also adds a**\<FlowItem/\>**to the**\<Flow/\>**, but it allows the position of this**\<FlowItem/\>**in the auto-wrapped line to be specified, instead of adding it to the end of the last row.

### \<Flow\>::GetFlowItems()

Call this function to get all direct children**\<FlowItem/\>**in the line order.

## Sample

Please check out[this tutorial project](https://github.com/vczh-libraries/Release/tree/master/Tutorial/GacUI_Layout/Flow).

