|
|
|
|
|
|
|
|
|
|
Flexbox example: automatic field layout
Flexbox controls allow arranging controls exactly as desired when the browser is resized. Here is a configuration example. A page contains 5 cells with images and text. These 5 cells are in a Flexbox control. With the Flexbox control, when the browser is resized horizontally, the 5 cells are automatically positioned according to 3 rules: - cells must be laid out on one or more rows depending on the available width,
- all cells must remain justified,
- cells must remain the same size.
Note: This page is based on the WW_Flexbox example. To rearrange the cells according to the size of the browser: - Place the Cell control fields in a Flexbox field: 3 cells on the first line and 2 cells on the second..
- Open the Flexbox control description. The options to be modified can be found in the "Detail" tab of the control description window.
Each rule to be applied corresponds to an option:
- when the width of the browser is reduced, cells move to the next row:
To apply this rule, go to "Line wrap (flex-wrap)" and choose "wrap". - all cells must occupy the full possible width, with uniform spacing between cells: to apply this rule, modify the "Horizontal alignment (justify-content)" property by selecting the "justify with padding (space-around)" option..
- cells must not change size: to apply this rule, vertical alignment in each line (align-items) is set at the top (beginning).
To obtain a clean interface, the spacing between rows and columns is set to 20 pixels. The anchoring options of the Flexbox control are set in a way so that it occupies all the available horizontal space and adapts vertically to fit its content. Here is the result at runtime: - Maximized browser:
- Reduced browser:
Related Examples:
|
Training (WEBDEV): WW_Flexbox
[ + ] This example presents the Flexbox control, which determines the positioning of the controls it contains.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|