Layout Properties

Layout
Defines how elements are positioned within this container.

Absolute
Elements are positioned freely.

Horizontal
Elements are positioned in order horizontally left to right.

Vertical
Elements are positioned in order vertically top to bottom.

The Layout property

Horizontal Alignment
Defines the horizontal positioning of all elements within this container.

Flex-Start
Elements are packed against the left edge.

Flex-End
Elements are packed against the right edge.

Center
Elements are packed together around the horizontal center.

Space-Between
Elements are distributed with the left element flush against the left edge, the right element flush against the right edge, and equal space between the items.

Space-Around*
Elements are distributed with equal space between them. The space at the left and right of the container equals half of the space between two adjacent items.

Baseline**
The baseline of all elements is aligned to the baseline of the parent container.

Stretch**
Elements stretch horizontally to fit the parent container. Only works when the elements have a width value of "auto."

* Only available when the Layout property is set to Horizontal

** Only available when the Layout property is set to Vertical

The Horizontal Alignment property

Vertical Alignment
Defines vertical positioning of all elements within this container.

Flex-Start
Elements are packed against the top edge.

Flex-End
Elements are packed against the bottom edge.

Center
Elements are packed together around the vertical center.

Space-Between
Elements are distributed with the top element flush against the top edge, the bottom element flush against the bottom edge, and equal space between the items.

Space-Around*
Elements are distributed with equal space between them. The space at the top and bottom of the container equals half of the space between two adjacent items.

Baseline**
The baseline of all elements is aligned to the baseline of the parent container.

Stretch**
Elements stretch vertically to fit the parent container. Only works when the elements have a height value of "auto."

* Only available when the Layout property is set to Vertical

** Only available when the Layout property is set to Horizontal

The Vertical Alignment property

Wrap
Defines whether elements within this container can wrap when there is not enough space to fit them in a single row or column. When the Layout property is set to Vertical, elements can wrap into columns. When the Layout property is set to Horizontal, elements can wrap into rows.

Nowrap
Elements do not wrap.

Wrap
The first element that does not fit in a row or column starts a new row or column. Elements in a row are positioned from left to right. Elements in a column are positioned from top to bottom. The first row is on the top, or the first column is on the left.

Wrap-Reverse
Elements behave as in Wrap, except that the first row is on the bottom, or the first column is on the right.

The Wrap property

Tile Align
Defines positioning of the columns and rows containing wrapped elements within this container.

Flex-Start
The rows are packed against the top edge, or the columns are packed against the left edge.

Flex-End
The rows are packed against the bottom edge, or the columns are packed against the right edge.

Center
The rows or columns are packed together around the center of the container.

Space-Between
The rows or columns are positioned against both edges, with equal space between them.

Space-Around
The rows or columns are positioned with equal space between them, and space along both edges equal to half of the space between two rows or columns.

Stretch
The rows or columns stretch to fit the parent container.

The Tile Align property

Horizontal Gap
Defines the minimum number of pixels between elements in a horizontal layout, or between columns in a wrapped vertical layout.

Notes about padding with a wrapped horizontal layout:

• When Horizontal Alignment is Flex-Start, Horizontal Gap defines a right padding, but you must define a left padding separately.
• For all other Horizontal Alignments, Horizontal Gap defines a left padding, but you must define a right padding separately.

The Horizontal Gap property

Vertical Gap
Defines the minimum number of pixels between elements in a vertical layout, or between rows in a wrapped horizontal layout.

Notes about padding with a wrapped vertical layout:

• When Vertical Alignment is Flex-Start, Vertical Gap defines a bottom padding, but you must define a top padding separately.
• For all other Vertical Alignments, Vertical Gap defines a top padding, but you must define a bottom padding separately.

The Vertical Gap property

Left Padding
Defines a number of pixels of space between the left container boundary and the leftmost edge of the content. Negative numbers are not allowed.

The Left Padding property

Right Padding
Defines a number of pixels of space between the right container boundary and the rightmost edge of the content. Negative numbers are not allowed.

The Right Padding property

Top Padding
Defines a number of pixels of space between the top container boundary and the topmost edge of the content. Negative numbers are not allowed.

The Top Padding property

Bottom Padding
Defines a number of pixels of space between the bottom container boundary and the bottommost edge of the content. Negative numbers are not allowed.

The Bottom Padding property

Link Paddings
Links all four padding editors so that their values are equal.

The Link Paddings property

Clip Content
Defines the handling of content that overflows this container.

TRUE
All overflowed content is clipped and is not visible.

FALSE
All overflowed content is visible and responds to mouse events.

The Clip Content property