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. El marco se basa en bootstrap, que es similar a SaaS. 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.
Flex Grid Advanced Sizing se usa para llenar el espacio adicional cuando no se agrega una clase de tamaño a la columna. Este tipo de comportamiento se denomina comportamiento de expansión. En este artículo, discutiremos el tamaño avanzado de Flex Grid en Foundation CSS.
Foundation CSS Flex Grid Clase de dimensionamiento avanzado:
- Columnas: esta clase se utiliza para crear las columnas.
- encoger: Esta clase se usa para encoger la columna. Solo ocupará el espacio horizontal que se necesita para su contenido.
Sintaxis:
<div class="row">
<div class="columns small-5">
...
</div>
<div class="columns">
...
</div>
...
</div>
Ejemplo: El siguiente código demuestra el tamaño avanzado de Foundation CSS Flex Grid.
HTML
<!DOCTYPE html> <html> <head> <title> Foundation CSS Flex Grid Advanced Sizing </title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <h3> Foundation CSS Flex Grid Advanced Sizing </h3> </center> <div class="row"> <div class="columns small-5" style="background-color:#8bd6ee"> 5 columns </div> <div class="columns" style="background-color:#f3ab7c"> Remaining space </div> <div class="columns" style="background-color:#fd1919"> Remaining space </div> </div> <br> <div class="row"> <div class="columns shrink" style="background-color:#f387ea"> This is shrink </div> <div class="columns" style="background-color:#69e989"> Remaining </div> </div> </body> </html>
Producción:
Foundation CSS Flex Grid Tamaño avanzado
Referencia: https://get.foundation/sites/docs/flex-grid.html#advanced-sizing
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA