Disposition / Agencement

Contrôle les propriétés de disposition des éléments en allant sur Advanced > Layout.

Réglages disponibles

Display – Affichage

La propriété display définit le type d’affichage utilisé pour le rendu d’un élément (bloc ou en ligne) et la disposition utilisée pour ses éléments fils : grid (grille) ou flexbox (boîtes flexibles).

Le type d’affichage donné par display possède deux composantes : le type d’affichage extérieur qui définit comment la boîte participe au flux et le type d’affichage intérieur qui définit l’organisation des éléments enfants

Ce paramètre spécifie le type de zone de rendu utilisé pour un élément. Il y a six options disponibles :

• flex – L’élément devient un flex-container et se comporte comme un block (type : display-inside).
• inline-flex – L’élément devient un flex-container et se comporte comme un inline-block (bloc en ligne).
• block – Définit le conteneur en tant que block (en vue de l’utilisation de la propriété CSS float sur ses enfants).
• inline-block – L’élément est inséré dans le flux en ligne mais bénéficie des propriétés d’un block.
• Inline – Élément inline (comme <span>).
• none – L’élément n’est pas affiché (et n'occupe plus aucun espace).

Float

Il y a trois options disponibles :

• none – Valeur par défaut. L’élément n’est pas flottant.
• left – L’élément sera flottant sur la partie gauche du conteneur.
• right – L’élément sera flottant sur la partie droite du conteneur.

La propriété float ne fonctionne pas si la propriété display de l’élément parent est définie sur flex, flex étant la valeur par défaut de la plupart des éléments dans Oxygen.

Overflow

Ce paramètre spécifie ce qui doit advenir d'un contenu lorsque celui-ci dépasse la zone de rendu d’un élément.
Il y a trois options disponibles :

• visible – Valeur par défaut. Le débordement n’est pas coupé. Il apparait en dehors des limites de l’élément.
• hidden – Le débordement est coupé. Le contenu débordant n’est pas visible.
• scroll – Le débordement est tronqué, mais une barre de défilement est ajoutée afin de permettre l'affichage du contenu en débordement.

Clear

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 y a quatre options disponibles :

• none – Autorise des éléments flottants des deux côtés.
• left – Pas d’élément flottant du côté gauche.
• right – Pas d’élément flottant du côté droit.
• both – Pas d’élément flottant du côté gauche et du côté droit.

Visibility

Ce paramètre spécifie si un élément est visible ou non. Il y a deux options disponibles:

• visible – Valeur par défaut. L’élément est visible.
• hidden – L’élément est caché (mais occupe toujours son espace. Cela se traduit par une zone vide).

Z-Index

Ce paramètre détermine l’ordre d’empilement d’un élément. Si deux éléments se superposent, l’élément avec l’indice z le plus élevé apparaît au premier plan

Position

Ce paramètre spécifie le type de méthode de positionnement utilisé pour un élément (statique, relatif, absolu, fixe). Il y a quatre options disponibles :

• static – Valeur par défaut.
• absolute – L’élément est positionné par rapport à son premier ancêtre positionné (non statique). S’il n'y a pas d'ancêtre positionné, c'est le conteneur initial qui est utilisé (body, …).
• relative – L’élément est positionné par rapport à sa position normale.
• fixed – L’élément est positionné par rapport à la fenêtre du navigateur.

Flexbox controls

Flex Direction

Ce paramètre spécifie comment les éléments flex sont placés dans le conteneur flex. Il y a quatre options disponibles:

• row – Les éléments flex sont affichés horizontalement, sous forme de rangée.
• column – Les éléments flex sont affichés verticalement, sous forme de colonne.
• row-reverse – (sélectionnez row et cochez Reverse)Comme pour row, mais dans l’ordre inverse.
• column-reverse – (sélectionnez column et cochez Reverse) Comme pour column, mais dans l’ordre inverse. 

Align Items

Ce paramètre spécifie l’alignement par défaut des éléments flex, eux-mêmes à l’intérieur d'un conteneur flex.
Il y a quatre options disponibles :

• flex-start – Les éléments sont positionnés au début du conteneur.
• center – Les éléments sont positionnés au centre du conteneur.
• flex-end – Les éléments sont positionnés à la fin du conteneur.
• stretch – Les éléments sont étirés pour s’adapter au conteneur, le remplir.

Flex Wrap

Ce paramètre définit si le contenu doit être distribué sur une seule ligne (flex-direction: row) / colonne (flex-direction: column) ou non.
Il y a trois options disponibles :

• nowrap – Les éléments flex-items ne passent pas à la ligne/colonne. Valeur par défaut.
• wrap – Les éléments passent à la ligne/colonne, si nécessaire.
• wrap-reverse – Les éléments passent à la ligne/colonne mais dans l’ordre inverse, si nécessaire.

Justify Content

Ce paramètre aligne les éléments du conteneur Flex lorsque ceux-ci n’utilisent pas tout l’espace disponible sur l’axe principal.
Il y a cinq options disponibles :

• flex-start – Les éléments sont positionnés au début du conteneur.
• center – Les éléments sont positionnés au centre du conteneur.
• flex-end – Les éléments sont positionnés à la fin du conteneur.
• space-between – L’espace disponible est réparti entre les éléments flex.
• space-around – L’espace disponible est réparti autour des éléments flex.

Align Content

Ce paramètre spécifie comment l’espace est réparti entre et autour des éléments flex le long de l’axe transversal de leur conteneur flex (axe secondaire).
Il y a cinq options disponibles :

• flex-start – Les lignes sont regroupées au début du conteneur flex.
• center – Les lignes sont regroupées au centre du conteneur flex.
• flex-end – Les lignes sont regroupées à la fin du conteneur flex.
• space-around – Les lignes sont réparties uniformément dans le conteneur flex, avec des demi-espaces à chaque extrémité.
• stretch – Les lignes sont étirées pour occuper l’espace restant.

Flexbox child controls

Lorsqu’un élément est l’enfant d’un autre élément qui est display: flex ou display: inline-flex, les Flexbox Child Controls sont disponibles.

Le paramètre Align Self spécifie l’alignement de l’élément sélectionné dans le conteneur Flex.
Il y a 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 placé à gauche (ou au début) du conteneur.
• center – L’élément est placé au centre du conteneur.
• right – L’élément est placé à droite (ou à la fin) du conteneur.
• stretch – L’élément est positionné afin de remplir le conteneur.

Le paramètre Order spécifie l’ordre d’un élément Flex par rapport au reste des éléments Flex dans le même conteneur. La valeur par défaut est 0.

Le paramètre Flex Grow permet à un enfant flex-item de s'agrandir pour occuper une proportion de l’espace disponible. Par défaut, Flex Grow vaut 0 (pas d'agrandissement).

Plusieurs éléments peuvent être rendus flexibles et se répartir l'espace restant. L'espace disponible est alors distribué entre ces éléments selon le facteur d'agrandissement spécifié pour chaque élément :

• En spécifiant un facteur d'agrandissement de 1, l'élément peut s'agrandir.
• En spécifiant un facteur d'agrandissement de 2, l'élément peut s'agrandir et, auquel cas, se verra attribuer deux fois plus de la répartition de l'espace disponible,
• etc.

Le paramètre Flex Shrink exprime le facteur de rétrécissement d'un élément. Elle permet à un enfant flex-item de se compresser automatiquement s'il n'y a pas d'espace suffisant au sein de son conteneur. La valeur par défaut est 1 : l'élément peut se rétrécir si nécessaire.

Greg C. / Ph. Reskator