Official Content

The Flex control is of container type. Its objective is to offer new ways to arrange controls in the user interface, even if the sizes of the controls contained are unknown. For this reason, it provides more efficient ways to achieve receptive user interfaces than the Table and Responsive Table controls.

To add a Flex control to the selected location, drag the Flex control Capture_201882116569_1_PNG from the toolbox:

AddFlexControl_2018829151335_1_png

Also, a Table or Responsive Table control can be converted by right-clicking on them and selecting the "Convert to Flex" option from the context menu (this option is also available in the main table of the form).

ConvertToFlex_png

Unlike the Table and Responsive Table controls, the Flex Control container has a group of properties called "Layout Behavior," where the following properties can be configured:

Layout Behavior (Default)

LayoutBehaviorFlexControlProperties_PNG

Layout Behavior (only if Flex Wrap is set to Wrap or Wrap Reverse)
LayoutBehaviorFlexControlWrapProperties_png


Flex Direction property


Flex Wrap property


Justify Content property


Align Items property


Align Content property (if Flex Wrap property is set to Wrap or Wrap Reverse)


Adjust Container Size property (it is displayed if Flex Wrap property is set to No wrap)

 

The Flex control has the Class property: Flex configured by default.  This class can be customized from the theme. In addition, from the theme class the following properties can be configured: Flex Direction propertyFlex Wrap propertyJustify Content propertyAlign Items propertyAlign Content property.

Availability

The control is available from GeneXus 15 upgrade 12

Scope

Platforms: SmartDevices (Android, iOS), Web(.Net, Java)
Objects: Panel for Smart Devices, Work With for Smart Devices, Web Panels

See Also

A GeneXus Flex and Flex Grid sample




Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant