|
|
|
|
|
|
|
|
Flexbox example: automatic control 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.
Remark: This page is based on the "WW_Flexbox" example. To rearrange the cells according to the size of the browser: - Place the Cell controls in a Flexbox control: 3 cells on the first row and 2 cells on the second.
- Open the Flexbox control description. The options to be modified are in the "Details" tab of the 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". - cells must occupy all the available width and be evenly spaced: To apply this rule, go to "Horizontal alignment (justify-content)" and choose "space-around".
- cells must remain the same size: To apply this rule, the "Vertical alignment on each row (align-items)" value is set to "flex-start".
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|