The Flexbox control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Flexbox control

Overview of the Flexbox control
Creating a Flexbox control
Flexbox control features

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

The Flexbox control

Overview of the Flexbox control

Flexbox is a standard layout system for web pages.
Flexbox controls were introduced in WEBDEV 28.
Starting with version 2024, the Flexbox control is available in WINDEV and WINDEV Mobile.

The process is very simple:

Drop the controls onto the Flexbox control.
The Flexbox control then automatically positions the controls according to the desired parameters.

The Flexbox control allows you to:

Define how controls are positioned when the browser or window is resized.
For more details, see Flexbox example: automatic control layout.
Set ratios to distribute available space among the controls.
For more details, see Flexbox example: ratios to distribute available space among controls.

Creating a Flexbox control

To create a Flexbox control:

On the "Creation" tab, in the "Containers" group, click "Flexbox".
Click where you want to create the control in the page. The control appears in the editor.

Remark: Several preset Flexbox controls appear when you expand the "Flexbox" option, including:

Column Flexbox,
Row Flexbox,
Flexbox cards.

To create a Flexbox control:

On the "Creation" tab, in the "Containers" group, expand "Flexbox and Layout" and select the display mode of the Flexbox control: horizontal or vertical. .
Click where you want to create the control in the page. The control appears in the editor.

To view the control characteristics:

Select the control.
Select "Description" in the control context menu.

Flexbox control features

The characteristics of Flexbox controls are defined in the different tabs of the description window, mainly in the "General" and "Details" tabs.

For more details, see:

Related Examples:

Training (WEBDEV): WW_Flexbox

[ + ] This example presents the Flexbox control, which determines the positioning of the controls it contains.