Ionic - 8.5 Aligner le contenu d'une grille Ionic

Une grille Ionic organise les colonnes côte à côte. Par défaut, toutes les colonnes s'adaptent à la plus haute, ce qui peut déformer la mise en page. Cette leçon montre comment régler l'alignement vertical et horizontal, pour choisir précisément la position du contenu.

Comprendre le problème des hauteurs

Une hauteur fixe, par exemple 300 pixels, ne s'adapte pas au contenu. Si la deuxième colonne reçoit un titre et un paragraphe, elle s'agrandit. Les autres colonnes s'étirent alors à la même hauteur.

La documentation officielle d'Ionic détaille ces réglages. Elle se trouve dans la partie consacrée aux composants, à la rubrique Grille, puis à l'alignement.

Aligner verticalement

La classe ion-align-items-start place chaque colonne en haut de sa zone. La classe ion-align-items-end les place en bas, et ion-align-items-center les centre verticalement.

<ion-row class="ion-align-items-center">
  <ion-col>Colonne 1</ion-col>
  <ion-col>Colonne 2</ion-col>
</ion-row>

Aligner horizontalement

Pour gérer l'horizontal, on ajoute à la ligne une classe ion-justify-content. Les valeurs start, center et end fonctionnent comme pour la verticale. La vidéo montre l'exemple avec center.

<ion-row class="ion-justify-content-center">

En résumé

Une grille Ionic ajuste ses colonnes à la plus grande. Les classes ion-align-items règlent l'alignement vertical, avec start, center ou end. Les classes ion-justify-content règlent l'alignement horizontal, avec les mêmes valeurs. Ces réglages gardent le contenu lisible, même quand les colonnes ont des tailles différentes.

Points clés

• Sans réglage, les colonnes s'étirent à la hauteur de la plus grande.
• ion-align-items-start place le contenu en haut.
• ion-align-items-center centre le contenu verticalement.
• ion-align-items-end place le contenu en bas.
• ion-justify-content-center centre le contenu horizontalement.

Questions fréquentes

Faut-il une hauteur fixe pour aligner les colonnes ?

Non. La vidéo montre qu'une hauteur fixe ne s'adapte pas au contenu. Les classes d'alignement suffisent pour régler la position.

Quelle différence entre l'alignement vertical et l'alignement horizontal ?

Les classes ion-align-items agissent verticalement. Les classes ion-justify-content agissent horizontalement.

Où trouver la liste complète des valeurs ?

La documentation officielle d'Ionic, dans la rubrique sur la grille et l'alignement, détaille toutes les valeurs.