DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE
Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Flexbox
  • Présentation du champ Flexbox
  • Créer un champ Flexbox
  • Caractéristiques du champ Flexbox
  • Utilisation des flexbox pour la mise en page
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation du champ Flexbox
Flexbox est une méthode de mise en page standard et déterministe des pages Web.
A partir de la version 28, le champ Flexbox est disponible dans WEBDEV.
A partir de la version 2024, le champ Flexbox est disponible dans WINDEV et WINDEV Mobile.
Le principe est simple :
  • Vous posez les champs de l'UI dans le champ Flexbox.
  • Le champ Flexbox se charge alors de positionner les champs automatiquement en fonction des paramètres souhaités.
Le champ Flexbox permet par exemple de :
Créer un champ Flexbox
WEBDEV - Code Serveur Pour créer un champ de type Flexbox :
  1. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Flexbox".
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.
Remarque : En déroulant l'option "Flexbox" du menu, plusieurs champs Flexbox pré-définis sont proposés, notamment :
  • Flexbox en colonnes,
  • Flexbox en lignes,
  • Cartes flexbox.
WINDEVAndroidiPhone/iPad Pour créer un champ de type Flexbox :
  1. Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Flexbox et Disposition" et choisissez le mode d'affichage de la flexbox : horizontale ou verticale. .
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.
Pour afficher les caractéristiques du champ :
  1. Sélectionnez le champ.
  2. Sélectionnez l'option "Description" dans le menu contextuel du champ.
Caractéristiques du champ Flexbox
Les caractéristiques du champ Flexbox sont définies par les différents onglets de la fenêtre de description du champ, notamment l'onglet "Général" et l'onglet "Détail".
Pour plus de détails, consultez :
Utilisation des flexbox pour la mise en page
Lorsque la page contient un champ fils direct, la page est générée avec une largeur minimale (min-width) égale à celle d"finie en édition.
Pour avoir un contenu qui s'adapte au navigateur moins large que la taille d'édition, il est nécessaire que tous les champs soient placés dans des champs Flexbox.
Exemple : Une page contient uniquement un champ Flexbox en mode "wrap" avec ancrage en largeur correspondant à "Agrandir/réduire comme le navigateur".
Pour ajouter un champ Bouton sous le champ Flexbox, il est nécessaire de créer un second champ Flexbox horizontal contenant le bouton en-dessous du premier champ Flebox.
Liste des exemples associés :
WW_Flexbox Exemples didactiques (WEBDEV) : WW_Flexbox
[ + ] Cet exemple présente le champ Flexbox qui détermine le positionnement des champs placés dedans.
Le champ Flexbox Exemples unitaires (WINDEV Mobile) : Le champ Flexbox
[ + ] Utilisation d'un champ Flexbox
Le champ Flexbox Exemples unitaires (WINDEV) : Le champ Flexbox
[ + ] Utilisation d'un champ Flexbox
Voir Aussi
Version minimum requise
  • Version 28
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 21/08/2024

Signaler une erreur ou faire une suggestion | Aide en ligne locale