Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Tiene numerosos componentes de sitio web preconstruidos que hacen que nuestro sitio web se vea profesional y mejora la experiencia del usuario del sitio web.
¿Por qué deberíamos usar Foundation CSS?
Foundation nos brinda toneladas de funciones de forma gratuita y, además, está altamente optimizado. Siempre debemos usar Foundation porque nos ayuda a ilustrar y crear sitios web de forma sencilla. Foundation CSS nos proporciona un montón de plantillas, lo que nos ayuda a comenzar a desarrollar el sitio web directamente. También nos da acceso a un sistema de cuadrícula sólido y algunos componentes de interfaz de usuario útiles y complementos de JavaScript divertidos, uno de esos componentes de interfaz de usuario es Flex Grid.
Base CSS Flex Grid:
Flex Grid no es más que un sistema de cuadrícula que se forma en la propiedad flexible que permite la estructura receptiva mediante la creación de filas y columnas. La clase de fila se usa para formar una fila y la clase de columna se emplea para formar columnas. También viene con características que están disponibles en flexboxes como apilamiento automático, ordenación de fuentes, alineación vertical y alineación horizontal.
La alineación de columnas se usa para alinear las columnas de la cuadrícula flexible a lo largo del eje horizontal o vertical en la fila principal. De forma predeterminada, todas las columnas de la cuadrícula flexible están alineadas a la izquierda y se pueden anular con la clase .align-[dir] a la clase principal flexible.
Alineación horizontal: no es necesario agregar ninguna clase a la fila flexible para alinear las columnas a la izquierda porque la columna está alineada a la izquierda de manera predeterminada.
Clases de alineación de columna de rejilla flexible:
- align-right: esta clase se agrega a la fila flexible para alinear las columnas a la derecha. no necesitamos usar la clase align-left porque la columna está alineada a la izquierda de forma predeterminada.
- align-center: esta clase se agrega a la fila flexible para alinear las columnas en el medio sin espacio entre ellas y espacio en los otros extremos de ellas.
- align-spaced: esta clase se agrega a la fila flexible cuando queremos la misma cantidad de espacio entre todas las columnas.
- align-justify: esta clase se agrega a la fila flexible para alinear los bordes izquierdo y derecho con espacio entre las columnas.
- align-bottom: al agregar esta clase al div del contenedor flexible, las columnas se alinean en la parte inferior.
- align-middle : al agregar esta clase al div del contenedor flexible, las columnas se alinean en el medio dejando la misma cantidad de espacio en los dos extremos.
- align-self-bottom, align-self-top, align-self-middle: al agregar estas clases a los divs de columna, las columnas se alinean en la parte inferior.
Sintaxis:
<div class="row align-right">
<div class="column small-4">
...
</div>
<div class="column small-4">
...
</div>
...
</div>
Ejemplo 1: el siguiente código demuestra la alineación predeterminada,
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3 class="text-center">Not adding any Align Class</h3> <div class="flex-container row margin-2" style="background-color:#b3ffb3"> <div class="column small-2" style="background-color: #66ff66">1</div> <div class="column small-2" style="background-color: #2eb82e">2</div> <div class="column small-2" style="background-color: #009933">3</div> </div> <pre class="margin-left-3">Columns are aligned to the left by default.</pre> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra la clase de alineación a la derecha de la columna Flexgrid .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3 class="text-center">align-right Class</h3> <div class="flex-container row align-right margin-2" style="background-color: #b3ffb3"> <div class="column small-2" style="background-color: #66ff66">1</div> <div class="column small-2" style="background-color: #2eb82e">2</div> <div class="column small-2" style="background-color: #009933">3</div> </div> <pre class="margin-left-3">Columns are aligned to the right.</pre> </body> </html>
Producción:
Ejemplo 3: El siguiente código demuestra la clase de centro de alineación Flexgrid .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3 class="text-center">align-center Class</h3> <div class="flex-container row align-center margin-2" style="background-color: #b3ffb3"> <div class="column small-2" style="background-color:#66ff66">1</div> <div class="column small-2" style="background-color:#2eb82e">2</div> <div class="column small-2" style="background-color:#009933">3</div> </div> <pre class="margin-left-3">Columns are aligned to center.</pre> </body> </html>
Producción:
Ejemplo 4: El siguiente código demuestra la clase con espaciado de alineación flexgrid .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3 class="text-center">align-spaced Class</h3> <div class="flex-container row align-spaced margin-2" style="background-color: #b3ffb3"> <div class="column small-2" style="background-color:#66ff66">1</div> <div class="column small-2" style="background-color:#2eb82e">2</div> <div class="column small-2" style="background-color:#009933">3</div> </div> <pre class="margin-left-3"> Columns are aligned with equal amount of space between them. </pre> </body> </html>
Producción:
Ejemplo 5: El siguiente código demuestra la clase de alineación y justificación de flexgrid .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3 class="text-center">align-justify Class</h3> <div class="flex-container row align-justify margin-2" style="background-color: #b3ffb3"> <div class="column small-2" style="background-color:#66ff66">1</div> <div class="column small-2" style="background-color:#2eb82e">2</div> <div class="column small-2" style="background-color:#009933">3</div> </div> <pre class="margin-left-3"> Columns are aligned with equal amount of space between them and on the other two ends of the left and right columns. </pre> </body> </html>
Producción:
Alineamiento vertical:
- Sin clase: si no agregamos ninguna clase de alineación vertical a un contenedor flexible, las columnas se alinean en la parte superior.
Ejemplo 6: El siguiente código demuestra la alineación superior vertical.
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3 class="text-center">No Class added</h3> <div class="flex-container margin-2" style="background-color:#b3ffb3;height:10rem"> <div class="column small-4" style="background-color: #66ff66; height: 2rem">1 </div> <div class="column small-4" style="background-color: #2eb82e; height: 5rem">2 </div> <div class="column small-4" style="background-color: #009933; height: 8rem">3 </div> </div> <pre class="margin-left-3"> Columns are aligned to top by default. </pre> </body> </html>
Producción:
Ejemplo 7: El siguiente código demuestra la clase de alineación inferior de flexgrid .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flexbox Mode</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3 class="text-center">align-bottom Class</h3> <div class="flex-container align-bottom margin-2" style="background-color:#b3ffb3; height:10rem"> <div class="column small-4" style="background-color:#66ff66; height:2rem">1 </div> <div class="column small-4" style="background-color:#2eb82e; height:5rem">2 </div> <div class="column small-4" style="background-color:#009933; height:8rem">3 </div> </div> <pre class="margin-left-3"> Columns are aligned to bottom. </pre> </body> </html>
Producción:
Ejemplo 8: El siguiente código demuestra la clase align-middle de flexgrid .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <title>Foundation CSS Flex Grid Column Alignment</title> </head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3 class="text-center">align-middle Class</h3> <div class="flex-container align-middle margin-2" style="background-color:#b3ffb3; height: 10rem"> <div class="column small-4" style="background-color:#66ff66; height:2rem">1 </div> <div class="column small-4" style="background-color:#2eb82e; height:5rem">2 </div> <div class="column small-4" style="background-color:#009933; height:8rem">3 </div> </div> <pre class="margin-left-3"> Columns are aligned to middle. </pre> </body> </html>
Producción:
Ejemplo 9: El siguiente código muestra las clases align-self-bottom , align-self-top , align-self-middle .
HTML
<!DOCTYPE html> <html> <head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3 class="text-center">align-self Class</h3> <div class="flex-container margin-2" style="background-color:#b3ffb3; height:10rem"> <div class="column small-4 align-self-bottom" style="background-color:#66ff66; height:2rem">1 </div> <div class="column small-4 align-self-top" style="background-color:#2eb82e; height:5rem">2 </div> <div class="column small-4 align-self-middle" style="background-color:#009933; height:8rem">3 </div> </div> <pre class="margin-left-3"> Columns with the class align-self-bottom is aligned to bottom. </pre> <pre class="margin-left-3"> Columns with the class align-self-top is aligned to top. </pre> <pre class="margin-left-3"> Columns with the class align-self-middle is aligned to middle. </pre> </body> </html>
Producción:
Link de referencia:https://get.foundation/sites/docs/flex-grid.html#column-alignment
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA