Fondazione - Flex Grid Advanced Sizing

Descrizione

Se la classe di dimensionamento non è inclusa nella colonna, si espande e riempie lo spazio rimanente nella colonna. Anche più colonne mantengono lo stesso spazio.

La classe shrink viene utilizzata per ridurre la colonna, ovvero occupa lo spazio orizzontale di cui ha bisogno il contenuto.

Esempio

Il seguente esempio dimostra l'uso del dimensionamento avanzato in 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 = "js/vendor/jquery.min.js"></script>
      <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 = "small-5 columns" style = "background-color:#8BD6EE;">Small 5 columns</div>
         <div class = "columns" style = "background-color:#C0B0F0;">Expanded columns</div>
         <div class = "columns" style = "background-color:#8BD6EE;">Expanded columns</div>
      </div>
      <br/>

      <h2>Shrink column</h2>

      <div class = "row">
         <div class = "shrink columns" style = "background-color:#FF6347;">
            Shrink column
         </div>

         <div class = "columns" style = "background-color:#7B68EE;">
            Expanded columns
         </div>
      </div>

   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato advanced_sizing.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.