ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Flexbox control
  • Overview
  • Options of the "General" tab
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
In the "General" tab of the Flexbox control description window, you can view and change the options of the different controls integrated into a flexbox container.
You can define the flex properties of each control to get the desired behavior in the flexbox container.
Remark: These properties also appear in the anchoring options of the control.
Options of the "General" tab
For each control in the flexbox container, you can configure the following aspects:
  • Width : Distribution of the horizontal free space into "parts".
    • if the width of the flexbox container increases, the controls will stretch horizontally to fill the available space (flex-grow). The possible values are:
      • 0: no growing
      • 1: controls will grow equally to fill the horizontal space available. This is the default option.
      • other value: controls will grow proportionally using this coefficient to fill the horizontal space available.
      Example: The horizontal space available is 200px, and there are 3 controls in the flexbox container. If "flex-grow" is set to 2 for control A, and is set to 1 for controls B and C, control A will take up 100px and controls B and C will take up 50px each.
    • if the width of the flexbox container decreases, the controls will shrink horizontally to adapt to the available space (flex-shrink). The possible values are:
      • 0: no shrinking
      • 1: controls will shrink equally to adapt to the horizontal space available. This is the default option.
      • other value: controls will shrink proportionally using this coefficient to adapt to the horizontal space available.
    • Reference width (flex-basis). The possible values are:
      • edit mode size (auto): The size of each element is taken as a reference to distribute the horizontal space between the controls.
      • adapted to content (content): The width of the flexbox container is taken as a reference to distribute the horizontal space between the controls
  • Height: Definition of vertical alignment and anchors (align-self).
    The possible values are:
    • inherited, the control will stretch vertically (stretch).
    • auto, defined by the Flexbox control
    • flex-start
    • center
    • flex-end
    • align texts * (baseline): Items are aligned so that their text baselines align.
      Remark: "*" indicates that this option is ignored in the editor.
    • stretch
    By default, the control will stretch vertically (stretch).
  • Other parameters:
    • Order: Controls are displayed following the order defined by this parameter. If no value is specified (undefined or 0), the control is positioned to the right of the previous control. Caution: A control with a position defined by a number can no longer be moved in the editor: it will remain in the position set by that number.
    • Custom CSS anchors: This option allows you to enter custom CSS code with the desired anchors. This CSS code overrides the previously defined parameters. For example:
      flex 20 1 100px;
      corresponds to:
      • flex-grow: 20
      • flex-shrink: 1
      • flex-basis: 100px
Minimum version required
  • Version 28
Comments
Click [Add] to post a comment

Last update: 06/28/2023

Send a report | Local help