Justify Content property

Official Content
Controls the alignment along the main-axis.

Values

Center Controls are positioned at the center of the container
Flex End Controls are positioned at the end of the container
Flex Start Default value. Controls are positioned at the beginning of the container
Space Around Controls are positioned with space before, between, and after the lines
Space Between Controls are positioned with space between the lines

Description

Specifies how flex controls are aligned along the main-axis of the flex container (layout or grid) after any flexible lengths and auto margins are resolved.

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

Flex Start value
image_201861512524_1_png
 
Flex End value
image_2018615125242_1_png
 
Center value
image_201861512534_1_png
 
Space Between value
image_2018615125811_1_png
 
Space Around value
image_201861512554_1_png

FlexJustifyContent domain

Possible options for setting the JustifyContent property at runtime. 

Note: JustifyContent 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 Justify center.
FlexEnd Justify at the end.
FlexStart  Justify at the start.
SpaceAround  Justify content before, after and between items.
SpaceBetween  Justify with a space between items.

Notes

  • When using Flex Layout, in order to appreciate an effect of this property, Max Width/Max Height properties must be set, or Flex Grow property must be off (0 value) with Width/Height already set, depending on the main-axis value (row/column respectively).

FAQ

Why naming flex-start and flex-end values instead of left and right?

Because naming left and right we are assuming that the layout is always from left to right, and there are devices supporting right to left layouts.

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

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