|
|
|
|
- Overview
- Options of the "General" tab
Flexbox control description: General tab
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:
corresponds to:- flex-grow: 20
- flex-shrink: 1
- flex-basis: 100px
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|