Comment commander et aligner les éléments dans la mise en page de la grille

Ce didacticiel montre le contrôle du placement et de l'alignement des articles dans la disposition de la grille CSS. Nous explorerons la commande d'articles et les aligner à la fois individuellement et en groupe.

Auparavant, nous avons couvert les bases de la disposition de la grille, y compris le placement des éléments et l'algorithme de placement automatique de la grille.

Pour une démonstration optimale, utilisez les dernières versions de Firefox (version 52 ou version ultérieure) ou Chrome (version 57 ou version ultérieure), tous deux offrant une prise en charge de mise en page native.

Concepts clés:

• La propriété order dicte la séquence d'éléments dans la grille, passant l'ordre DOM par défaut. Ceci est particulièrement utile avec de nombreux éléments ajoutés ou ajoutés dynamiquement.
• L'alignement de l'axe des lignes utilise justify-self (éléments individuels) et justify-items (tous les éléments). justify-self aligne un seul élément; justify-items aligne tous les éléments de la grille.
• L'alignement de l'axe des colonnes utilise align-self (éléments individuels) et align-items (tous les éléments). Les deux acceptent start, end, center et stretch valeurs.
• L'alignement global de la grille est contrôlé par justify-content (axe de ligne) et align-content (axe de colonne), appliqué au récipient de grille. Ceux-ci acceptent start, end, center, stretch, space-around, space-between, et space-evenly.

Contrôler l'ordre des éléments avec order:

La propriété order spécifie la séquence de placement des éléments. Par défaut, les éléments suivent leur ordre DOM. Cependant, order permet une disposition personnalisée, particulièrement bénéfique avec de nombreux éléments ajoutés ou dynamiquement ajoutés.

Les valeurs inférieures order apparaissent en premier; Les éléments avec des valeurs égales order maintiennent leur ordre DOM.

Exemple:

html:

<code class="language-html"><div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div></code>

CSS (extrative de l'extrait):

<code class="language-css">.c { grid-row-start: 1; grid-row-end: 2; }
.e { grid-row-start: 1; grid-row-end: 3; }
.b, .j { order: 2; }
.a, .i { order: 3; }</code>

N'oubliez pas: la modification de l'ordre des éléments avec order peut affecter l'accessibilité. Les lecteurs d'écran et la navigation au clavier peuvent ne pas refléter les changements visuels.

Alignement de l'axe des lignes (justify-self, justify-items):

justify-self Aligne les éléments individuels, tandis que justify-items aligne tous les éléments le long de l'axe de ligne. Les deux utilisent start, end, center, et stretch.

Alignement de l'axe des colonnes (align-self, align-items):

align-self Aligne les éléments individuels, et align-items aligne tous les éléments le long de l'axe de la colonne, en utilisant start, end, center, et stretch.

Alignement global de la grille (justify-content, align-content):

justify-content (axe de ligne) et align-content (axe de colonne) alignent toute la grille dans son conteneur. En plus de start, end, center, et stretch, ils acceptent également space-around, space-between et space-evenly.

Conclusion:

La commande et l'alignement des éléments de maîtrise dans la grille CSS fournit un contrôle de mise en page précis. N'oubliez pas les considérations d'accessibilité lors de la réorganisation des articles.

(Section FAQ supprimée pour la concision. Les FAQ fournies sont déjà bien couvertes dans le tutoriel réécrit.)

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!