Direction of the controls

• undefined: corresponds to the default "online" option.
• row: fields are displayed horizontally side by side, from left to right.
• columnar: fields are displayed vertically one below the other from top to bottom.
• row-reverse: fields are displayed horizontally side by side from right to left.
• column-reverse: fields are displayed vertically one below the other, from bottom to top.

• Return to line (flex-wrap)
• Horizontal alignment (justify-content)
• Global vertical alignment (align-content)
• Vertical alignment on each row (align-items)

• Return to line (flex-wrap)
• Vertical alignment (justify-content)
• Global horizontal alignment (align-content)
• Horizontal alignment on each column (align-items)

Row direction

Below are the values for a row direction:

• Line feed (flex-wrap):
  Defines the position of the controls in the flexbox container. Controls are laid out horizontally, from left to right. If there is no more horizontal space, the other controls are positioned on the line below. This mode takes into account the width of each control and the width of the flexbox container.
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "no-wrap".
  • no line break (nowrap): fields are positioned one after the other. The Flexbox control stretches horizontally or a scrollbar is displayed.
  • wrap: the field is positioned at the beginning of the next line, moving downwards if there isn't enough width to display it.
  • Reverse wrap-reverse: The field is positioned at the beginning of the previous line, moving upwards if there isn't enough width to display it.
• Horizontal alignment (justify-content):
  Defines the horizontal layout of the controls. Controls are laid out from left to right according to the order defined in the settings of the "General" tab.
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "start".
  • at the start (flex-start): The first field is left-framed. The other controls are laid out from left to right.
  • centered: Fields are centered horizontally. There is no space between them. The same spacing value is generated to the left and right of the group of controls.
  • at the end (flex-end): The last field is right-framed. The other controls are laid out from right to left.
  • justify (space-between): Fields are arranged horizontally from left to right. The first control is aligned to the left. The last control is aligned to the right. the other items are distributed in the remaining space and the same spacing value is used between the items.
  • justify with space-around padding: Fields are distributed horizontally from left to right. Controls are distributed with equal space around them, taking into account both the other controls and the right and left edges of the flexbox container.
• Global vertical alignment (align-content):
  Defines the vertical layout of the controls. Controls are laid out from left to right and from top to bottom according to the order defined in the settings of the "General" tab.
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "stretch".
  • at the beginning (flex-start): Fields in the first line (or first line of fields) are framed in relation to the top edge of the Flexbox control.. The fields in the second line (or second line of fields) are framed in relation to the bottom edge of the fields in the first line, and so on.
  • centered (center): Depending on the total height of all lines, the fields of all lines (or each line of fields) are centered vertically.
  • at the end (flex-end): Fields in the last N line (or last line of fields) are framed in relation to the bottom edge of the Flexbox field.. Controls in the second to last line (N-1) are aligned to the top edge of the controls in the last line (N), etc.
  • justify (space-between): Fields in the first line (or first line of fields) are cropped in relation to the top edge of the Flexbox control.. Controls in the last line (N) are aligned to the bottom edge of the flexbox container. Items in the inner lines are aligned and distributed at equal distance from the items in the first and last line.
  • space-around justification: The fields in each line (or each line of fields) are distributed vertically from top to bottom.. Controls in each line are distributed with equal space around them, taking into account both the other controls and the top and bottom edges of the flexbox container.
  • stretch: Fields will stretch horizontally and vertically to occupy the entire Flexbox control space.. This is the default value ("undefined").
• Vertical alignment in each line (align-items):
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "stretch".
  • at the start (flex-start): All fields are framed in relation to the top edge of the Flexbox control..
  • centered: All fields are centered. Each control is centered according to its respective height.
  • at the end (flex-end): All fields are framed in relation to the bottom edge of the Flexbox control..
  • align texts * (baseline): All field texts are aligned.
    Note: '*' indicates that this option is not supported by the editor.
  • stretch: The field will stretch vertically..

Column direction

• Line wrap (flex-wrap)
  Defines the position of the controls in the flexbox container. Controls are laid out vertically from top to bottom. If there is no more vertical space, the other controls are positioned on the line to the right. This mode takes into account the width of each control and the width of the flexbox container.
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "no-wrap".
  • no line break (nowrap): No jump to the next column, fields are positioned one below the other from top to bottom.. The Flexbox control stretches vertically or a scrollbar is displayed.
  • wrap: fields are positioned one below the other from top to bottom. If there is not enough vertical space for the next control, it is positioned on the next column to the right.
  • Reverse line wrap: Fields are positioned one below the other from top to bottom, starting from the top left corner of the Flexbox control.. If there is not enough vertical space for the next control, it is positioned on the next column to the left.
• Vertical alignment (justify-content)
  Defines the vertical layout of the controls. Fields are positioned from top to bottom according to the display order defined in the "General" tab settings.
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "start".
  • at the start (flex-start): The first field is framed at the top. The other controls are laid out from top to bottom.
  • centered: Fields are centered vertically.. There is no space between them. The same spacing value is generated above and below the group of controls.
  • at the end (flex-end): The last field is framed at the bottom. The other controls are laid out from bottom to top.
  • justify (space-between): Fields are arranged vertically from top to bottom. The first control is aligned to the top. The last control is aligned to the bottom. The other items are distributed in the remaining space and the same spacing value is used between the items.
  • justify with space-around padding: Fields are arranged vertically from top to bottom. Controls are distributed with equal space around them, taking into account both the other controls and the top and bottom edges of the flexbox container.
• Global horizontal alignment (align-content)
  Defines the horizontal layout of the controls. Controls are laid out from left to right and from top to bottom according to the order defined in the settings of the "General" tab.
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "stretch".
  • at the beginning (flex-start): Fields in the first column (or first column of fields) are cropped in relation to the left edge of the Flexbox control.. Controls in the second column are aligned to the right edge of the controls in the first column, etc.
  • centered (center): Depending on the total width of all columns, the fields in all columns (or each column of fields) are centered horizontally.
  • at the end (flex-end): Fields in the last N column (or last column of fields) are cropped in relation to the right-hand edge of the Flexbox control.. Controls in the second to last column (N-1) are aligned to the left edge of the controls in the last column (N), etc.
  • justify (space-between): Fields in the first column (or first column of fields) are framed in relation to the left edge of the Flexbox control.. Controls in the last column (N) are aligned to the right edge of the flexbox container. Controls in the inner columns are aligned and distributed at equal distance from the controls in the first and last column.
  • space-around justification: The fields in each column (or each column of fields) are distributed horizontally from left to right.. Controls in each column are distributed with equal space around them, taking into account both the other controls and the left and right edges of the flexbox container.
  • stretch: Fields will stretch horizontally and vertically to occupy the entire Flexbox control space..
• Horizontal alignment in each column (align-items):
  
  The possible options are as follows:
  • undefined: Default value. Corresponds to "stretch".
  • at the beginning (flex-start): All fields are framed in relation to the left edge of the Flexbox control..
  • centered: All fields are centered. Each control is centered according to its respective width.
  • at the end (flex-end): All fields are framed in relation to the right-hand edge of the Flexbox control..
  • align texts * (baseline): All field texts are aligned.
    Note: '*' indicates that this option is not supported by the editor.
  • stretch: the field will stretch horizontally.

Other characteristics

The additional characteristics are as follows:

• Column-gap: defines the space allocated between each column when multiple columns are generated.
• Space between lines (row-gap): Defines the space allocated between each line when multiple lines are generated..
• Additional CSS: Custom CSS code indicating desired anchoring. This CSS code overrides the parameters.