Align Items property

Official Content
Controls the alignment along the cross axis.

Values

Baseline Controls are aligned such as their baselines align. This is useful to have several texts from diferents controls aligned taking into account different font sizes.
Center Controls are positioned at the center of the container.
Flex End Controls are positioned at the end of the container.
Flex Start Controls are positioned at the beginning of the container.
Stretch Default value. Controls are stretched to fit the container. In other words, children match the size of their container in the cross axis.

Description

Describes how to align children along the cross axis of their container.

The following examples have as main-axis the row (column axis is analogous) and wrap the content.

Stretch value
image_2018615132146_1_png
 
Flex Start value
image_2018615132218_1_png
 
Flex End value
image_2018615132238_1_png
 
Center value
image_2018615132253_1_png
 
Baseline value
Not represented in the panel designer.

FlexAlignItems domain

Possible options for setting the AlignItems property at runtime. 

Note: AlignItems property is only available at runtime for a Grid control with Control Type property as 'SD Flex Grid' or Custom Render property as 'Flex'.

Baseline Align at the baseline.
Center Align at the center.
FlexEnd Align at the end.
FlexStart  Align at the start.
Stretch  Stretch controls to fit the container.

Notes

  • Any other value different from 'Stretch' for this property requires that the children controls have a non-default value for the Width/Height property depending on which is the cross-axis (if the main axis is 'row', it requires height; but if the main axis is 'column', it requires width)

Limitations

  • This property does not have any effect with Flex Grid in iOS.

Run-time/Design-time

This property applies both at run-time and at design-time.

Availability

This property is available since GeneXus 15 upgrade 12.

Scope

Platforms: Web(.Net, Java), Smart Devices(Android, IOS)
Controls: Grid, Table

See Also

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.