Contrôlez les propriétés de mise en page des éléments avec les paramètres dans Avancé> Mise en page (Layout).
Affichage
Ce paramètre spécifie le type de boîte de rendu utilisé pour un élément. Il existe six options disponibles :
- flex – conteneur flex au niveau du bloc. C’est la valeur par défaut pour les sections, les colonnes et les divs.
- inline-flex – conteneur flex au niveau en ligne.
- block – élément de niveau bloc. Définissez l’Affichage sur block lors de l’utilisation de la propriété CSS float sur ses enfants.
- Inline – élément en ligne (comme <span>).
- inline-block – bloc de niveau en ligne.
- aucun – l’élément n’est pas affiché.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement3.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-2.png)
Flotte
La propriété float ne fonctionne pas si la propriété d’affichage de l’élément parent est définie sur flex , qui est la valeur par défaut pour la plupart des éléments dans Oxygen. Trois options sont disponibles:
- aucun – Valeur par défaut. L’élément ne flotte pas
- left – L’élément flotte à gauche de son conteneur.
- right – L’élément flotte à droite de son conteneur.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement9.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-8.png)
Débordement (Overflow)
Ce paramètre spécifie ce qui doit se passer si le contenu déborde de la zone de rendu d’un élément. Trois options sont disponibles :
- visible – Valeur par défaut. Le débordement n’est pas écrêté. Il rend en dehors de la boîte de l’élément.
- hidden – Le débordement est tronqué. Le contenu débordant n’est pas visible.
- scroll – Le débordement est tronqué, mais une barre de défilement est ajoutée pour voir le reste du contenu.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement10.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-9.png)
Clear (Libérer)
Ce paramètre spécifie sur quels côtés d’un élément les éléments flottants ne sont pas autorisés à flotter. Il existe quatre options disponibles :
- aucun – Valeur par défaut. Permet les éléments flottants des deux côtés.
- left – Aucun élément flottant autorisé sur le côté gauche.
- right – Aucun élément flottant autorisé sur le côté droit.
- both – Aucun élément flottant autorisé sur le côté gauche ou droit.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement11.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-10.png)
Visibilité
Ce paramètre spécifie si un élément est visible ou non. Deux options sont disponibles:
- visible – Valeur par défaut. L’élément est visible.
- hidden – L’élément est masqué (mais occupe toujours de l’espace).
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement12.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-11.png)
Index Z
Ce paramètre détermine l’ordre d’empilement d’un élément. Si deux éléments se superposent, l’élément avec le z-index le plus élevé apparaîtra en haut.
![](https://woofrance.fr/wp-content/uploads/2021/01/zindexfield.png)
Position
Ce paramètre spécifie le type de méthode de positionnement utilisé pour un élément (statique, relatif, absolu, fixe). Il existe quatre options disponibles:
- statique – Valeur par défaut.
- absolu – L’élément est positionné par rapport à son premier élément ancêtre positionné (non statique).
- relative – L’élément est positionné par rapport à sa position normale.
- fixed – L’élément est positionné par rapport à la fenêtre du navigateur.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement13.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-12.png)
COMMANDES FLEXBOX
Direction du flex
Ce paramètre spécifie comment les éléments flexibles sont placés dans le conteneur flex. Il existe quatre options disponibles:
- row – Les éléments flex sont affichés horizontalement, sous forme de ligne.
- colonne – Les éléments flexibles sont affichés verticalement, sous forme de colonne.
- row-reverse – Identique à une ligne , mais dans l’ordre inverse.
- column-reverse – Identique à une colonne , mais dans l’ordre inverse.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement4.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-3.png)
Aligner les éléments
Ce paramètre spécifie l’alignement par défaut des éléments flex à l’intérieur d’un conteneur flex. Il existe quatre options disponibles:
- flex-start – Les éléments sont positionnés au début du conteneur.
- center – Les articles sont positionnés au centre du conteneur.
- flex – end – Les articles sont positionnés à la fin du conteneur.
- stretch – Les éléments sont étirés pour s’adapter au conteneur.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement5.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-4.png)
Justifier le contenu
Ce paramètre aligne les éléments du conteneur flexible lorsque les éléments n’utilisent pas tout l’espace disponible sur l’axe principal. Il existe cinq options disponibles:
- flex-start – Les éléments sont positionnés au début du conteneur.
- center – Les articles sont positionnés au centre du conteneur.
- flex-end – Les éléments sont positionnés à l’extrémité du conteneur.
- espace entre – L’espace disponible est réparti entre les éléments flexibles.
- espace autour – L’espace disponible est réparti autour des éléments flexibles.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement7.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-5.png)
Emballage flexible
Ce paramètre spécifie si les éléments flexibles doivent être enveloppés ou non. Trois options sont disponibles:
- nowrap – Spécifie que les éléments flex ne seront pas enveloppés.
- wrap – Spécifie que les éléments flex seront enveloppés si nécessaire.
- wrap-reverse – Spécifie que les éléments flex seront enveloppés si nécessaire, mais dans l’ordre inverse.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement7.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-6.png)
Aligner le contenu
Ce paramètre spécifie la répartition de l’espace entre et autour des éléments flexibles le long de l’axe transversal de leur conteneur flexible. Il existe cinq options disponibles:
- flex-start – Les lignes sont compactées vers le début du conteneur flex.
- center – Les lignes sont tassées vers le centre du conteneur flexible.
- flex-end – Les lignes sont emballées vers l’extrémité du conteneur flexible.
- espace autour – Les lignes sont uniformément réparties dans le conteneur flexible, avec des espaces de demi-taille à chaque extrémité
- stretch – Les lignes s’étirent pour occuper l’espace restant.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement8.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-7.png)
CONTRÔLES ENFANTS FLEXBOX
Lorsqu’un élément est l’enfant d’un autre élément qui est display: flex ou display: inline-flex, les contrôles enfants Flexbox sont disponibles.
Le paramètre Aligner auto spécifie l’alignement de l’élément sélectionné à l’intérieur du conteneur flexible. Il existe cinq options disponibles:
- auto – Valeur par défaut. L’élément hérite de la propriété Align Items de son conteneur parent.
- left – L’élément est positionné à gauche (ou au début) du conteneur.
- center – L’élément est positionné au centre du conteneur.
- right – L’élément est positionné à droite (ou à l’extrémité) du conteneur.
- stretch – L’élément est positionné pour s’adapter au conteneur.
Le paramètre Order spécifie l’ordre d’un élément flexible par rapport au reste des éléments flex à l’intérieur du même conteneur. La valeur par défaut est 0.
Le paramètre Flex Grow spécifie la croissance de l’élément par rapport au reste des éléments flex à l’intérieur du même conteneur. La valeur par défaut est 0.
Le paramètre Flex Shrink spécifie comment l’élément se rétrécira par rapport au reste des éléments flex à l’intérieur du même conteneur. La valeur par défaut est 1.
![D: Dropbox! Upwork! Manualsoxygen! Options de style Disposition, taille et espacement14.png](https://woofrance.fr/wp-content/uploads/2021/01/d-dropbox-upwork-manuals-oxygen-styling-option-13.png)