Fundação - Flex Grid Column Alignment

Descrição

As colunas da grade flexível podem ser alinhadas ao longo do eixo horizontal ou vertical na linha pai.

Alinhamento horizontal

As colunas podem ser alinhadas da mesma maneira que o conteúdo alinhado no parágrafo.

Usando a classe .align- [dir] na linha flexível, você pode alinhar as colunas de acordo com seu desejo. Por padrão, a coluna é alinhada à esquerda.
A classe align-spaced é usada para manter o espaço entre cada coluna.
A classe align-justify alinha as colunas às bordas esquerda e direita com um espaço entre a coluna.

Exemplo

O exemplo a seguir demonstra o uso do alinhamento horizontal na Fundação -

<!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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima horizontal_alignment.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Alinhamento vertical

A grade flexível é alinhada ao topo por padrão. Você pode alterar o comportamento com o outro conjunto de classes de alinhamento. No alinhamento vertical, as opções estão disponíveis como superior, central, inferior e alongamento .

Exemplo

O exemplo a seguir demonstra o uso do Alinhamento Vertical na Fundação -

<!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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima vertical_alignment.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

↰ Previous page