Fondation 6: La nouvelle grille Flex

Fondation 6's Flex Grid: un système de mise en page puissant basé sur Flexbox

Foundation 6 introduit une grille flexible qui change la donne, tirant parti de la puissance de Flexbox pour créer des conceptions Web réactives et complexes. Cependant, ce système avancé nécessite des considérations de compatibilité des navigateurs; C'est incompatible avec les navigateurs hérités comme IE8 et IE9.

Fonctionnalités et considérations clés:

• Composant facultatif: La grille Flex n'est pas activée par défaut. Il est conçu en remplacement de la grille standard, et les deux ne peuvent pas être utilisés simultanément en raison de noms de classe qui se chevauchent (.row, .column).
• Contrôle amélioré: Gérer facilement l'ordre des éléments, l'alignement horizontal et vertical et d'autres aspects de mise en page. Créez plusieurs grilles, chacune avec des dispositions uniques, pour le contrôle granulaire.
• Prise en charge du navigateur: sa dépendance à Flexbox signifie la compatibilité avec les navigateurs modernes uniquement. Le support du navigateur hérité nécessite de s'en tenir à la grille standard.

Implémentation de la grille flexible:

pour les utilisateurs de SASS, modifiez app.scss:

// @include foundation-grid;
@include foundation-flex-grid;

Pour les versions personnalisées, sélectionnez la grille flexible pendant le processus de personnalisation.

Utilisation de base:

Une disposition simple en 3 colonnes:

<div class="row">
  <div class="column small-12 medium-6 large-4">Column 1</div>
  <div class="column small-12 medium-6 large-4">Column 2</div>
  <div class="column small-12 medium-6 large-4">Column 3</div>
</div>

Ordre des éléments:

Flexbox simplifie la réorganisation des éléments. Utilisez order-{value} ou {size}-order-{value} pour la commande spécifique à l'appareil:

<div class="row">
  <div class="column order-2">Second</div>
  <div class="column order-1">First</div>
</div>

Commande spécifique au périphérique:

<div class="row">
  <div class="column small-order-1 medium-order-2">Small: First, Medium: Second</div>
  <div class="column small-order-2 medium-order-1">Small: Second, Medium: First</div>
</div>

Alignement:

Centre facilement du contenu horizontalement et verticalement à l'aide de classes comme align-center, align-middle, etc., appliquées aux éléments .row ou individuels .column. Par exemple, éléments de menu uniformément espacés:

<div class="row align-spaced">
  <div class="column small-3">Home</div>
  <div class="column small-3">About</div>
  <div class="column small-3">Contact</div>
</div>

Système de grille SASS révisé:

Foundation 6 améliore son mélange de grille de base, permettant plusieurs définitions de grille avec des dénombrements de colonnes variables. Cela permet des dispositions hautement personnalisées:

.row-listing {
  @include grid-row(18) {
    .primary { @include grid-column(10); }
    .secondary { @include grid-column(4); }
    .tertiary { @include grid-column(4); }
  }
}

Conclusion:

Fondation 6's Flex Grid offre une flexibilité et un contrôle supérieurs sur la disposition par rapport à son prédécesseur. Si le support du navigateur hérité n'est pas une contrainte, c'est l'approche recommandée pour le développement rationalisé et les conceptions adaptables. Le mélange de grille SASS amélioré permet en outre les développeurs de systèmes de grille hautement personnalisés.

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!