Align Content property

Official Content
This documentation is valid for:
This property controls the alignment of the flex lines in the flex container.

Values

Center Lines are packed toward the center of the flex container.
Flex End Lines are packed toward the start of the flex container.
Flex Start Lines are packed toward the end of the flex container.
Space Around Lines are evenly distributed in the flex container, with half-size spaces on either end.
Space Between Lines are evenly distributed in the flex container.
Stretch Default value. Lines stretch to take up the remaining space

Description

This property applies when the Flex Wrap property is different from 'No Wrap' (that makes multiple lines in the flex container) and you want to align these lines. It is similar to Align Items property, but instead of aligning the embedded controls, it aligns the flex lines.

Note: Use the Justify Content property to align the items on the main-axis (horizontally or vertically depending on Flex Direction property).

Stretch value
image_201861513460_1_png
 
Flex Start value
image_2018615134619_1_png
 
Flex End value
image_2018615134637_1_png
 
Center value
image_2018615134916_1_png
 
Space Between value
image_2018615134710_1_png
 
Space Around value
image_2018615134728_1_png

FlexAlignContent domain

Possible flex wrap options for setting the AlignContent property at runtime.

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

Center Align lines center.
FlexEnd Align lines at the end.
FlexStart Align lines at the start.
SpaceAround Align lines content before, after and between items.
SpaceBetween Align lines with a space between items.
Stretch Stretch lines to fit the container.

Limitations

  • This property does not have any effect with Flex Layout in Android.

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.