Fondation - Alignement des colonnes Flex Grid

La description

Les colonnes de la grille flexible peuvent être alignées le long de l'axe horizontal ou vertical de la ligne parent.

Alignement horizontal

Les colonnes peuvent être alignées de la même manière que celle du contenu aligné en paragraphe.

  • En utilisant la classe .align- [dir] dans la ligne flex, vous pouvez aligner les colonnes selon votre souhait. Par défaut, la colonne est alignée à gauche.

  • La classe align-spaced est utilisée pour conserver l'espace entre chaque colonne.

  • La classe align-justify aligne les colonnes sur les bords gauche et droit avec un espace entre la colonne.

Exemple

L'exemple suivant illustre l'utilisation de l' alignement horizontal dans Foundation -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <title>Foundation Template</title>
      <!-- Compressed CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Example of Flex Grid</h2>
      <div class = "row">
         <div class = "column small-3" style = "background-color:#FF6347;">Left</div>
         <div class = "column small-3" style = "background-color:#C0B0F0;">Side</div>
      </div>

      <h2>Aligned to right</h2>
      <div class = "row align-right">
         <div class = "column small-4" style = "background-color:#FF6347;">Right</div>
         <div class = "column small-4" style = "background-color:#C0B0F0;">Side</div>
      </div>

      <h2>Aligned in Middle</h2>
      <div class = "row align-center">
         <div class = "column small-5" style = "background-color:#FF6347;">Aligned in</div>
         <div class = "column small-5" style = "background-color:#C0B0F0;">Middle</div>
      </div>

      <h2>Aligned to the Edges</h2>
      <div class = "row align-justify">
         <div class = "column small-3" style = "background-color:#FF6347;">Left Edge</div>
         <div class = "column small-3" style = "background-color:#C0B0F0;">Right Edge</div>
      </div>

      <h2>Aligned to Space around</h2>
      <div class = "row align-spaced">
         <div class = "column small-4" style = "background-color:#FF6347;">Spaces</div>
         <div class = "column small-4" style = "background-color:#C0B0F0;">Spaces</div>
      </div>

   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus horizontal_alignment.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

Alignement vertical

La grille flexible est alignée vers le haut par défaut. Vous pouvez modifier le comportement avec l'autre ensemble de classes d'alignement. Dans l'alignement vertical, des options sont disponibles telles que haut, milieu, bas et étirement .

Exemple

L'exemple suivant illustre l'utilisation de l' alignement vertical dans Foundation -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Foundation Template</title>
      <!-- Compressed CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Example of Flex Grid</h2>
      <div class = "row align-bottom">
         <div class = "columns" style = "background-color:#8BD6EE;">Lorem Ipsum
            is simply dummy text of the printing and typesetting industry.
         </div>

         <div class = "columns" style = "background-color:#7B68EE;">Lorem Ipsum
            is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
            when an unknown printer took a galley of type and scrambled it to make a type
            specimen book.
         </div>
      </div>

   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus vertical_alignment.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.