Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
CSS se utiliza principalmente para diseñar sitios web haciéndolos más presentables y atractivos. Tenemos que usar diferentes modos de diseño como Bloque, En línea, Tabla, Posicionado. La mejor manera de diseñar diseños es usar módulos de diseño como Flexbox , que es una combinación de la propiedad de visualización flexible y propiedades como el margen de relleno , etc.
Foundation CSS brinda acceso a una gran cantidad de componentes preconstruidos, podemos usarlos fácilmente agregando clases auxiliares a diferentes elementos. Uno de esos componentes de la interfaz de usuario es el modo FlexBox. El modo Flexbox reemplaza el método tradicional de Foundation de usar flotadores, alineación vertical, celdas de tabla, etc., con características de flexbox y nos ayuda a crear un sitio web de una manera más fácil. Mientras que en la forma tradicional de implementar flexbox usando CSS, tenemos que agregar muchas propiedades como padding, margin, etc., para diseñar el playout. En el Flexbox de Foundation, solo necesitamos agregar las clases auxiliares como align-left , align-bottom , etc.
Clases de modo Flexbox:
- align-center: cuando agregamos align-center a un div de flexbox que tiene algunos elementos secundarios, los elementos secundarios se colocan en el centro sin ningún espacio entre ellos.
- align-spaced: cuando agregamos align-spaced a un div de flexbox que tiene algunos elementos secundarios, los elementos secundarios se colocan en el centro con el mismo espacio a la izquierda y a la derecha.
- align-justify: cuando agregamos align-justify a un div de flexbox que tiene algunos elementos secundarios, los elementos secundarios se colocan en el centro con el mismo espacio a su izquierda y derecha y cero espacio a la derecha del elemento más a la derecha y en el a la izquierda del elemento más a la izquierda.
- align-middle: agregar un align-middle al div principal garantizará que el margen en la parte superior e inferior de todos los elementos sea igual.
- align-top: agregar un align-top al div principal garantizará que el margen en la parte superior de todos los elementos sea cero.
- align-bottom: agregar un align-bottom al div principal garantizará que el margen en la parte inferior de todos los elementos sea cero.
- flex-child-auto: esta es una clase de ayuda que se puede agregar a cualquiera de los elementos secundarios de un div que se convierte en un flexbox. El flex-child-auto cuando se agrega a un elemento secundario de un div de flexbox, ocupa todo el espacio en el flexbox que aún no está ocupado por los elementos secundarios.
Sintaxis:
<div class="flex-container align-center">
...
</div>
Ejemplo 1: El siguiente código demuestra la clase de centro de alineación de flexbox .
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 Center Helper Class </h3> <!--Parent Flexbox Container--> <div class="flex-container align-center margin-3" style="background-color:#ccffcc; height:4rem"> <div class="small-2 padding-1" style="background-color: #00ff00">1</div> <div class="small-2 padding-1" style="background-color: #2eb82e">2</div> <div class="small-2 padding-1" style="background-color: #009933">3</div> </div> <pre class="margin-left-3"> It aligns all the child div in the center. </pre> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra la clase de espaciado de alineación de flexbox .
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"> <!-- oundation-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 Spaced Helper Class </h3> <!--Parent Flexbox Container--> <div class="flex-container align-spaced margin-3" style="background-color: #ccffcc; height:4rem"> <div class="small-2 padding-1" style="background-color:#00ff00">1</div> <div class="small-2 padding-1" style="background-color:#2eb82e">2</div> <div class="small-2 padding-1" style="background-color:#009933">3</div> </div> <pre class="margin-left-2"> It aligns all the child div in the center with space on their left and right. </pre> </body> </html>
Producción:
Ejemplo 3: El siguiente código demuestra la clase de alineación y justificación de flexbox .
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 Justify Helper Class </h3> <!--Parent Flexbox Container--> <div class="flex-container align-justify margin-3" style="background-color:#ccffcc; height:4rem"> <div class="small-2 padding-1" style="background-color:#00ff00">1</div> <div class="small-2 padding-1" style="background-color:#2eb82e">2</div> <div class="small-2 padding-1" style="background-color:#009933">3</div> </div> <pre class="margin-left-3"> It aligns all the child div in the center with space on their left and right except the rightmost and leftmost div. </pre> </body> </html>
Producción:
Ejemplo 4: El siguiente código demuestra la clase flexbox align-bottom .
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 Helper Class </h3> <!--Parent Flexbox Container--> <div class="flex-container align-bottom margin-3" style="background-color: #ccffcc; height:4rem"> <div class="small-2 padding-1" style="background-color:#00ff00">1</div> <div class="small-2 padding-1" style="background-color:#2eb82e">2</div> <div class="small-2 padding-1" style="background-color:#009933">3</div> </div> <pre class="margin-left-3"> It ansures all the child elements have zero margin on the bottom. </pre> </body> </html>
Producción:
Ejemplo 5: El siguiente código demuestra la clase align-middle de flexbox .
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 Middle Helper Class </h3> <!--Parent Flexbox Container--> <div class="flex-container align-middle margin-3" style="background-color: #ccffcc; height:5rem"> <div class="small-2 padding-1" style="background-color: #00ff00">1</div> <div class="small-2 padding-1" style="background-color: #2eb82e">2</div> <div class="small-2 padding-1" style="background-color: #009933">3</div> </div> <pre class="margin-left-3"> It ensures all the child elements have same margin on the bottom and top. </pre> </body> </html>
Producción:
.
Ejemplo 6: se pueden combinar dos clases auxiliares para crear diseños únicos y personalizados. align -middle y align-justify asegurarán que todos los elementos secundarios tengan el mismo margen en la parte inferior y superior. Alineará todos los elementos secundarios en el centro con espacio a su izquierda y derecha, excepto el div más a la derecha y más a la izquierda.
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 Middle and Justify Class Combined </h3> <!--Parent Flexbox Container--> <div class="flex-container align-middle align-justify margin-3" style="background-color: #ccffcc; height:5rem"> <div class="small-2 padding-1" style="background-color:#00ff00">1</div> <div class="small-2 padding-1" style="background-color:#2eb82e">2</div> <div class="small-2 padding-1" style="background-color:#009933">3</div> </div> <pre class="margin-left-3"> It ansures all the child elements have same margin on the bottom and top. And aligns all the child div in the center with space on their left and right except the rightmost and leftmost div. </pre> </body> </html>
Producción:
Ejemplo 7: El siguiente código demuestra la clase flexbox flex-child-auto .
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"> Flex child auto class </h3> <!--Parent Flexbox Container--> <div class="flex-container margin-3" style="background-color:#ccffcc; height:5rem"> <div class="small-2 padding-1" style="background-color: #00ff00">1</div> <div class="flex-child-auto small-2 padding-1" style="background-color:#2eb82e">2</div> <div class="small-2 padding-1" style="background-color:#009933">3</div> </div> <pre class="margin-left-3"> To whichever child element it is added takes up all the space that's left after all elements have taken up their space. </pre> </body> </html>
Producción:
Cuando dos elementos secundarios del mismo div flexbox principal tienen la clase flex-child-auto , el espacio restante está ocupado por igual por esos dos elementos secundarios.
Compatibilidad con navegadores: el modo Foundation CSS Flexbox solo es compatible con estos navegadores.
- La última versión de Chrome y Firefox
- Safari 6 y superior
- Internet Explorer/Edge 10+ y superior
- iOS 7 y superior
- Android 4.4 y superior
Enlace de referencia: https://get.foundation/sites/docs/flexbox-mode.html
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA