Atteindre l'alignement vertical (merci, sous-grille!)

Les outils de conception Web modernes ont considérablement amélioré les capacités d'alignement vertical. Les premières dispositions de sites Web, souvent de 960px de large, reposaient fortement sur l'alignement horizontal à l'aide de grilles à 12 colonnes. L'avènement des requêtes médiatiques, tout en résolvant de nombreux problèmes, a introduit de nouveaux défis, en particulier concernant l'alignement lorsque les éléments se reflètent ou se repositionnent.

Considérez un scénario commun: une "barre" contenant des groupes de bouts, chacun dans un<fieldset></fieldset> avec un<legend></legend> . Sur les écrans plus grands, l'alignement est simple. Une approche CSS simple, en utilisant des flotteurs, gère cela et fournit un comportement réactif à des points d'arrêt plus petits:

 .
  Largeur: 48%;
  flottant: à gauche;
  marge droite: 1%;
}

/* Mobile */
@media uniquement écran et (max-largeur: 480px) {
  .
    Largeur: 100%;
  }
}

Cependant, sur des écrans plus petits, un désalignement vertical devient apparent. Alors que la largeur fixe, les solutions CSS à base de pixels utilisant des requêtes multimédias peuvent forcer l'alignement, cette approche manque de flexibilité et repose sur des "numéros magiques" liés à un contenu spécifique:

 /* Mobile */
@media uniquement écran et (max-largeur: 480px) {
  légende {
    Largeur: 160px;
  }
  bouton {
    Largeur: 130px;
  }
}

Cette inflexibilité, couplée à la dépendance aux requêtes médiatiques (que je vis à minimiser), nécessite une solution plus adaptable. La solution idéale devrait permettre aux boutons et aux étiquettes de répondre:

1. Espace disponible
2. Dimensions du contenu
3. Éléments environnants

Les requêtes médiatiques échouent parce qu'elles ne considèrent pas l'espace environnant, comme illustré dans "The Flexbox Holy Albatross" de Heydon Pickering. Le comportement souhaité est pour la seconde<fieldset></fieldset> Pour envelopper uniquement lorsque les deux champs ne tiennent plus sur une seule ligne.

Flexbox et grille: tentatives initiales

Flexbox, avec sa propriété flex-wrap: wrap , offre une flexibilité améliorée, permettant aux éléments de s'écouler sur plusieurs lignes. Cependant, une min-width est encore souvent nécessaire pour un alignement vertical parfait.

La grille CSS, conçue pour la gestion de la disposition, fournit des mots clés auto-fit et auto-fill (dans repeat() ) pour les dispositions multiples sans requêtes multimédias. En utilisant auto-fit , nous réalisons:

 .wrapper - Accessibilité-outils {
  Affichage: grille;
  grille-template-colonnes: répéter (automatique, 450px);
  Grid-Gap: 10px;
}

Cependant, des valeurs de largeur absolues pourraient encore être nécessaires pour un alignement optimal. Les pistes de grille flexibles utilisant des unités fr ou minmax() offrent d'autres améliorations, mais des limites surviennent car seuls les enfants directs du conteneur de la grille sont considérés comme des éléments de grille.

La solution de sous-réseau

CSS Grid Level 2 introduit subgrid , permettant aux grilles imbriquées de hériter le dimensionnement des pistes de leur parent. Cela résout le problème des grilles imbriquées indépendantes. Sous-réseau permet aux éléments des réseaux enfants de répondre au contenu dans les réseaux de frères et sœurs.

Pour notre exemple de bouton, la grille parent est définie à l'aide de auto-fill et minmax() :

 .wrapper - Accessibilité-outils {
  Affichage: grille;
  grille-template-colonnes: répéter (remplissage automatique, Minmax (150px, 1fr));
  Grid-Gap: 10px;
}

Les grilles enfants utilisent subgrid pour hériter des pistes de colonne du parent:

 .Sub-grud {
  Affichage: grille;
  Colonne de grille: Span 3;
  Grid-Template-Colonnes: Sous-grid;
  Align-Items: Centre;
}

Cela garantit un alignement cohérent et un comportement réactif. Les boutons et les étiquettes s'adaptent à l'espace disponible, enveloppant sur de nouvelles lignes uniquement lorsque cela est nécessaire.

Compatibilité du navigateur et lecture plus approfondie

La prise en charge du navigateur de sous-réseau est actuellement limitée (principalement Firefox). Les requêtes en fonctionnalité CSS peuvent fournir des secours à d'autres navigateurs. Pour des informations détaillées sur la compatibilité des navigateurs, reportez-vous à caniuse.com. La lecture complémentaire sur ce sujet comprend des articles de Miriam Suzanne, Rachel Andrew et Heydon Pickering (liens fournis dans l'article original). Un wrapper autour des champs peut être nécessaire pour gérer un bug impliquant des éléments de forme, une grille et un flexion. La propriété display du champ peut être définie sur contents pour y remédier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!