|
|
|
|
|
|
|
|
|
|
- Présentation
- Comment le faire ?
Exemple Flexbox : disposition automatique des champs
Un champ Flexbox permet que les champs se redisposent exactement comme voulu quand la taille du navigateur change. Voici un exemple de configuration. Une page contient 5 cellules avec des images et du texte. Ces 5 cellules sont disposées dans un champ Flexbox. Grâce au champ Flexbox, quand la largeur du navigateur change, les 5 cellules se placent automatiquement en suivant les 3 règles : - les cellules doivent se placer sur une ou plusieurs lignes selon la largeur disponible,
- l'ensemble des cellules doit rester justifié dans la page,
- les cellules ne doivent pas changer de taille.
Remarque : Cette page est basée sur l'exemple WW_Flexbox. Pour obtenir le repositionnement des cellules en fonction de la taille du navigateur : - Placer les champs Cellule dans un champ Flexbox : 3 cellules sur une première ligne et 2 cellules sur la deuxième.
- Afficher la description du champ Flexbox. Les options à modifier se trouvent dans l'onglet "Détail" de la fenêtre de description du champ.
Chaque règle à appliquer correspond à une option :
- quand la largeur du navigateur se réduit, les cellules passent à la ligne :
Pour appliquer cette règle, il est nécessaire de modifier la propriété "Retour à la ligne (flex-wrap)", en choisissant l'option "retour à la ligne (wrap)". - l'ensemble des cellules doit occuper toute la largeur possible avec un espacement uniforme entre les cellules : Pour appliquer cette règle, il est nécessaire de modifier la propriété "Alignement horizontal (justify-content)" en choisissant l'option "justifier avec blanc tournant (space-around)".
- les cellules ne doivent pas changer de taille : Pour appliquer cette règle, l'alignement vertical dans chaque ligne (align-items) est fixé en haut (au début).
Pour aérer, un espace entre les lignes et les colonnes est fixé à 20 pixels. L'ancrage du champ Flexbox est défini pour qu'il occupe toute la place en largeur et qu'il s'adapte à son contenu en hauteur. En exécution, le résultat est le suivant : - Navigateur maximisé :
- Navigateur réduit :
Liste des exemples associés :
|
Exemples didactiques (WEBDEV) : WW_Flexbox
[ + ] Cet exemple présente le champ Flexbox qui détermine le positionnement des champs placés dedans.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|