Hexa PAGE - Classes - Alignements

Alignement flexible

<section class="hx-flexible-alignment hx-space-around">
<div style="width:200px;background-color:red">Elément 1</div>
<div style="width:200px;background-color:green">Elément 2</div>
<div style="width:200px;background-color:blue">Elément 3</div>
</section>

La classe suivante facilite l'alignement de plusieurs éléments quelque soit le dispositif d'affichage utilisé.

• hx-flexible-alignment
  Les éléments fils sont centrés sur une ligne avec, par défaut, des espaces de séparation optimisés.
  Les éléments sont présentés en colonne lorsque la taille de l'écran ne permet pas de tous les aligner.

Classes complémentaires

Ces classes s'ajoutent à la classe hx-flexible-alignment

• hx-center
  Les éléments sont regroupés au centre de la ligne.
• hx-left
  Les éléments sont regroupés vers la gauche de la ligne.
• hx-right
  Les éléments sont regroupés vers la droite de la ligne.
• hx-space-evenly
  Les éléments sont séparés par des espaces identiques entre eux et aux extrémités de la ligne.
• hx-space-between
  Les éléments sont séparés par des espaces identiques entre eux mais sans espacement aux extrémités de la ligne.
• hx-space-around
  Les éléments sont séparés par des espaces identiques entre eux et de moitié aux extrémités de la ligne.