L'onglet "Détail" de la fenêtre de description du champ Flexbox permet de définir le comportement du champ Flexbox lors du redimensionnement du navigateur en largeur ou en hauteur. Les champs contenus dans le champ Flexbox vont obéir aux règles correspondant à différents paramètres.

Orientation des champs

Le premier paramètre à définir est Orientation (flex-direction). Ce paramètre définit dans quel sens seront affichés les champs contenus dans le champ Flexbox. Ce positionnement dépend également de l'ordre d'affichage des champs. Les options disponibles sont les suivantes :

• non défini : correspond à option "en ligne" par défaut.
• en ligne (row) : les champs sont affichés horizontalement les uns à coté des autres, de la gauche vers la droite.
• en colonne (column) : les champs sont affichés verticalement les uns en dessous des autres du haut vers le bas.
• en ligne, sens inverse (row-reverse) : les champs sont affichés horizontalement les uns à coté des autres de la droite vers la gauche.
• en colonne, sens inverse (column-reverse) : les champs sont affichés verticalement les uns en dessous des autres du bas vers le haut.

• Retour à la ligne (flex-wrap)
• Alignement horizontal (justify-content)
• Alignement vertical global (align-content)
• Alignement vertical dans chaque ligne (align-items)

Et dans le cas d'une orientation en colonne, les paramètres à définir seront les suivants :

• Retour à la ligne (flex-wrap)
• Alignement vertical (justify-content)
• Alignement horizontal global (align-content)
• Alignement horizontal dans chaque colonne (align-items)

Orientation en ligne

Les caractéristiques pour une orientation en ligne sont les suivantes :

• Retour à la ligne (flex-wrap) :
  Définit la position des champs contenus dans le champ Flexbox. Les champs sont disposés les uns après les autres horizontalement de la gauche vers la droite. S'il n'y a plus de place horizontalement, les champs suivants sont positionnés sur la ligne en dessous. Ce fonctionnement prend en compte la largeur de chaque champ et la largeur du champ Flexbox.
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "pas de retour à la ligne".
  • pas de retour à la ligne (nowrap) : Les champs sont positionnés les uns après les autres. Le champ Flexbox s'étire en largeur ou un ascenseur est affiché.
  • retour à la ligne (wrap) : Le champ est positionné au début de la ligne suivante en allant vers le bas s'il n'y a pas assez de place en largeur pour l'afficher.
  • retour à la ligne en sens inverse (wrap-reverse) : Le champ est positionné au début de la ligne précédente en allant vers le haut s'il n'y a pas assez de place en largeur pour l'afficher.
• Alignement horizontal (justify-content) :
  Définit la position horizontale des champs. Les champs sont positionnés de la gauche vers la droite selon leur ordre d'affichage défini dans les paramètres de l'onglet "Général".
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "au début".
  • au début (flex-start) : Le premier champ est cadré à gauche. Les autres champs sont positionnés de gauche à droite.
  • centré (center) : Les champs sont centrés horizontalement. Les champs sont collés les uns contre les autres sans espace de séparation. Un espacement identique est généré à gauche et à droite du groupe de champs.
  • à la fin (flex-end) : Le dernier champ est cadré à droite. Les autres champs sont positionnés de droite à gauche.
  • justifier (space-between) : Les champs sont répartis horizontalement de la gauche vers la droite. Le premier champ est cadré à gauche. Le dernier champ est cadré à droite. les autres champs sont répartis dans l'espace restant avec un espace identique entre chaque champ.
  • justifier avec blanc tournant (space-around) : Les champs sont répartis horizontalement de la gauche vers la droite. Les champs sont répartis avec un espacement identique entre chaque champ ainsi que par rapport au bord droit et au bord gauche du champ Flexbox.
• Alignement vertical global (align-content) :
  Définit la position verticale des champs. Les champs sont positionnés de la gauche vers la droite et du haut vers le bas selon leur ordre d'affichage défini dans les paramètres de l'onglet "Général".
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "étendre".
  • au début (flex-start) : Les champs de la première ligne (ou première ligne de champs) sont cadrés par rapport au bord haut du champ Flexbox. Les champs de la seconde ligne (ou seconde ligne de champs) sont cadrés par rapport au bord bas des champs de la première ligne, etc.
  • centré (center) : En fonction de la hauteur totale de toutes les lignes, les champs de toutes les lignes (ou chaque ligne de champs) sont centrés verticalement.
  • à la fin (flex-end) : Les champs de la dernière ligne N (ou dernière ligne de champs) sont cadrés par rapport au bord bas du champ Flexbox. Les champs de la ligne N-1 (ou ligne N-1 de champs) sont cadrés par rapport au bord haut des champs de la dernière ligne N, etc.
  • justifier (space-between) : Les champs de la première ligne (ou première ligne de champs) sont cadrés par rapport au bord haut du champ Flexbox. Les champs de la dernière ligne N (ou dernière ligne de champs) sont cadrés par rapport au bord bas du champ Flexbox. Les champs des lignes intérieures (ou lignes intérieures de champs) sont cadrés et répartis à égale distance des champs de la première et dernière ligne.
  • justifier avec blanc tournant (space-around) : Les champs de chaque ligne (ou chaque ligne de champs) sont répartis verticalement du haut vers le bas. Les champs de chaque ligne (ou chaque ligne de champs) sont répartis avec un espacement identique entre chaque champ ainsi que par rapport au bord haut et au bord bas du champ Flexbox.
  • étendre (stretch) : Les champs vont s'étendre horizontalement et verticalement afin d'occuper l'espace complet du champ Flexbox. Valeur par défaut correspondant à "non défini".
• Alignement vertical dans chaque ligne (align-items) :
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "étendre".
  • au début (flex-start) : Tous les champs sont cadrés par rapport au bord haut du champ Flexbox.
  • centré (center) : Tous les champs sont centrés. Chaque champ est centré en fonction de sa hauteur respective.
  • à la fin (flex-end) : Tous les champs sont cadrés par rapport au bord bas du champ Flexbox.
  • aligner les textes * (baseline) : Tous les textes des champs sont alignés.
    Remarque : '*' indique que cette option n'est pas prise en compte sous l'éditeur.
  • étendre (stretch) : Le champ va s'étendre verticalement.

Orientation en colonne

Les caractéristiques pour une orientation en colonne sont les suivantes :

• Retour à la ligne (flex-wrap)
  Définit la position des champs contenus dans le champ Flexbox. Les champs sont disposés les uns en dessous des autres verticalement du haut vers le bas. S'il n'y a plus de place verticalement, les champs suivants sont positionnés sur la colonne vers la droite. Ce fonctionnement prend en compte la largeur de chaque champ et la largeur du champ Flexbox.
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "pas de retour à la ligne".
  • pas de retour à la ligne (nowrap) : Pas de passage à la colonne suivante, les champs sont positionnés les uns en dessous des autres du haut vers le bas. Le champ Flexbox s'étire en hauteur ou un ascenseur apparaît.
  • retour à la ligne (wrap) : Les champs sont positionnés les uns en dessous des autres du haut vers le bas. S'il n'y a pas assez de place en hauteur pour positionner le champ suivant, il est positionné sur la colonne suivante à droite.
  • retour à la ligne en sens inverse (wrap-reverse) : Les champs sont positionnés les uns en dessous des autres du haut vers le bas en partant du coin haut gauche du champ Flexbox. S'il n'y a pas assez de place en hauteur pour positionner le champ suivant, il est positionné sur la colonne précédente à gauche.
• Alignement vertical (justify-content)
  Définit la position verticale des champs. Les champs sont positionnés du haut vers le bas selon leur ordre d'affichage défini dans les paramètres de l'onglet "Général".
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "au début".
  • au début (flex-start) : Le premier champ est cadré en haut. Les autres champs sont positionnés du haut vers le bas.
  • centré (center) : Les champs sont centrés verticalement. Les champs sont collés les uns en dessous des autres sans espace de séparation. Un espacement identique est généré en haut et en bas du groupe de champs.
  • à la fin (flex-end) : Le dernier champ est cadré en bas. Les autres champs sont positionnés du bas vers le haut.
  • justifier (space-between) : Les champs sont répartis verticalement du haut vers le bas. Le premier champ est cadré en haut. Le dernier champ est cadré en bas. Les autres champs sont répartis dans l'espace restant avec un espace identique entre chaque champ.
  • justifier avec blanc tournant (space-around) : Les champs sont répartis verticalement du haut vers le bas. Les champs sont répartis avec un espacement identique entre chaque champ ainsi que par rapport au bord haut et au bord bas du champ Flexbox.
• Alignement horizontal global (align-content)
  Définit la position horizontale des champs. Les champs sont positionnés de la gauche vers la droite et du haut vers le bas selon leur ordre d'affichage défini dans les paramètres de l'onglet "Général".
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "étendre".
  • au début (flex-start) : Les champs de la première colonne (ou première colonne de champs) sont cadrés par rapport au bord gauche du champ Flexbox. Les champs de la seconde colonne (ou seconde colonne de champs) sont cadrés par rapport au bord droit des champs de la première colonne, etc.
  • centré (center) : Selon la largeur totale de toutes les colonnes, les champs de toutes les colonnes (ou chaque colonne de champs) sont centrés horizontalement.
  • à la fin (flex-end) : Les champs de la dernière colonne N (ou dernière colonne de champs) sont cadrés par rapport au bord droit du champ Flexbox. Les champs de la colonne N-1 (ou colonne N-1 de champs) sont cadrés par rapport au bord gauche des champs de la dernière colonne N, etc.
  • justifier (space-between) : Les champs de la première colonne (ou première colonne de champs) sont cadrés par rapport au bord gauche du champ Flexbox. Les champs de la dernière colonne N (ou dernière colonne de champs) sont cadrés par rapport au bord droit du champ Flexbox. Les champs des colonnes intérieures (ou colonnes intérieures de champs) sont cadrés et répartis à égale distance des champs de la première et dernière colonne.
  • justifier avec blanc tournant (space-around) : Les champs de chaque colonne (ou chaque colonne de champs) sont répartis horizontalement de la gauche vers la droite. Les champs de chaque colonne (ou chaque colonne de champs) sont répartis avec un espacement identique entre chaque champ ainsi que par rapport au bord gauche et au bord droit du champ Flexbox.
  • étendre (stretch) : Les champs vont s'étendre horizontalement et verticalement afin d'occuper l'espace complet du champ Flexbox.
• Alignement horizontal dans chaque colonne (align-items) :
  
  Les options possibles sont les suivantes :
  • non défini : Valeur par défaut. Correspond à "étendre".
  • au début (flex-start) : Tous les champs sont cadrés par rapport au bord gauche du champ Flexbox.
  • centré (center) : Tous les champs sont centrés. Chaque champ est centré en fonction de sa largeur respective.
  • à la fin (flex-end) : Tous les champs sont cadrés par rapport au bord droit du champ Flexbox.
  • aligner les textes * (baseline) : Tous les textes des champs sont alignés.
    Remarque : '*' indique que cette option n'est pas prise en compte sous l'éditeur.
  • étendre (stretch) : Le champ va s'étendre horizontalement.

Autres caractéristiques

Les autres caractéristiques sont les suivantes :

• Espace entre les colonnes (column-gap) : Définit l'espace alloué entre chaque colonne lorsque plusieurs colonnes sont générées.
• Espace entre les lignes (row-gap) : Définit l'espace alloué entre chaque ligne lorsque plusieurs lignes sont générées.
• CSS complémentaire : Code CSS personnalisé indiquant l'ancrage souhaité. Ce code CSS surcharge les paramètres.