Direction of the controls

• undefined: by default, corresponds to "row".
• row: controls are laid out horizontally, from left to right.
• column: controls are laid out vertically, from top to bottom.
• row-reverse: controls are laid out horizontally, from right to left.
• column-reverse: controls are laid out vertically, from bottom to top.

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

• Line wrap (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 wrap (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 available options are:
  • undefined: Default value. Corresponds to "no-wrap".
  • nowrap: Controls are laid out in a single line. The Flexbox control stretches horizontally or a scrollbar is displayed.
  • wrap: Controls that do not fit in the line are positioned on the next line.
  • wrap-reverse: Controls that do not fit in the line are positioned on the next line from bottom to top.
• 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 available options are:
  • undefined: Default value. Corresponds to "start".
  • flex-start: The first control is aligned to the left. The other controls are laid out from left to right.
  • center: Controls 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.
  • flex-end: The last control is aligned to the right. The other controls are laid out from right to left.
  • space-between: Controls are laid out horizontally, from left to right. The first control is aligned to the left. The last control is aligned to the right. the other controls are distributed in the remaining space and the same spacing value is used between the controls.
  • space-around: Controls are laid out 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 available options are:
  • undefined: Default value. Corresponds to "stretch".
  • flex-start: Controls in the first line are aligned to the top edge of the flexbox container. Controls in the second line are aligned to the bottom edge of the controls in the first line, etc.
  • center: Controls of all the lines are centered vertically, taking into account the total height of the lines.
  • flex-end: Controls in the last line (N) are aligned to the bottom edge of the flexbox container. Controls in the second to last line (N-1) are aligned to the top edge of the controls in the last line (N), etc.
  • space-between: Controls in the first line are aligned to the top edge of the flexbox container. Controls in the last line (N) are aligned to the bottom edge of the flexbox container. Controls in the inner lines are aligned and distributed at equal distance from the controls in the first and last line.
  • space-around: Controls in each line 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: Controls will stretch horizontally and vertically to take up the remaining space in the flexbox container. This is the default value ("undefined").
• Vertical alignment on each row (align-items):
  
  The available options are:
  • undefined: Default value. Corresponds to "stretch".
  • flex-start: All controls are aligned to the top edge of the Flexbox control.
  • center: All controls are centered. Each control is centered according to its respective height.
  • flex-end: All controls are aligned to the bottom edge of the Flexbox control.
  • align texts * (baseline): All the text of the controls is aligned.
    Remark: '*' indicates that this option is ignored in the editor.
  • stretch: The control 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 available options are:
  • undefined: Default value. Corresponds to "no-wrap".
  • nowrap: Controls are laid out vertically in a single column, from top to bottom. The Flexbox control stretches vertically or a scrollbar is displayed.
  • wrap: Controls are laid out vertically 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.
  • wrap-reverse: Controls are laid out vertically from top to bottom, starting from the upper-left corner of the flexbox container. 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. Controls are laid out from top to bottom according to the order defined in the settings of the "General" tab.
  
  The available options are:
  • undefined: Default value. Corresponds to "start".
  • flex-start: The first control is aligned to the top. The other controls are laid out from top to bottom.
  • center: Controls are centered vertically. There is no space between them. The same spacing value is generated above and below the group of controls.
  • flex-end: The last control is aligned to the bottom. The other controls are laid out from bottom to top.
  • space-between: Controls distributed vertically from top to bottom. The first control is aligned to the top. The last control is aligned to the bottom. The other controls are distributed in the remaining space and the same spacing value is used between the controls.
  • space-around: Controls distributed 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 available options are:
  • undefined: Default value. Corresponds to "stretch".
  • flex-start: Controls in the first column are aligned to the left edge of the flexbox container. Controls in the second column are aligned to the right edge of the controls in the first column, etc.
  • center: Controls of all the columns are centered horizontally, taking into account the total width of the columns.
  • flex-end: Controls in the last column (N) are aligned to the right edge of the flexbox container. Controls in the second to last column (N-1) are aligned to the left edge of the controls in the last column (N), etc.
  • space-between: Controls in the first column are aligned to the left edge of the flexbox container. 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: Controls in each column 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: Controls will stretch horizontally and vertically to take up the remaining space in the flexbox container.
• Horizontal alignment on each column (align-items):
  
  The available options are:
  • undefined: Default value. Corresponds to "stretch".
  • flex-start: All controls are aligned to the left edge of the Flexbox control.
  • center: All controls are centered. Each control is centered according to its respective width.
  • flex-end: All controls are aligned to the right edge of the Flexbox control.
  • align texts * (baseline): All the text of the controls is aligned.
    Remark: '*' indicates that this option is ignored in the editor.
  • stretch: The control will stretch horizontally.

Other characteristics

The additional characteristics are as follows:

• Space between columns (column-gap): Sets the space between columns.
• Space between rows (row-gap): Sets the space between rows.
• Additional CSS: Custom CSS code with the desired anchors. This CSS code overrides the parameters.