Diseño de cuadrícula de fotos justificado responsivo con CSS puro-flexbin. CSS
| Autor: | guoyunhe |
|---|---|
| Views Total: | 5,296 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 23, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
flexbin. CSS es una biblioteca CSS ligera y flexible que le permite crear un diseño de cuadrícula receptivo, ordenado y justificado para mostrar sus fotos como se ve en Google Image Search y Flickr. Fuertemente basado en CSS3 Flexbox y totalmente personalizable a través de SCSS.
Funcionamiento
Sólo tiene que colocar la hoja de estilo flexbin. CSS en el encabezado del documento y ya está listo para ir.
<link href="flexbin.css" rel="stylesheet">
La estructura HTML para crear una cuadrícula de fotos sensible y justificada con márgenes.
<div class="flexbin flexbin-margin"> <a href="#"> <img src="1.jpg" /> </a> <a href="#"> <img src="2.jpg" /> </a> <a href="#"> <img src="3.jpg" /> </a> ... </div>
Personalice el diseño de la rejilla en el flexbin. SCSS como se muestra abajo:
// Default variables that can be overrided $flexbin-row-height: 300px !default; $flexbin-space: 5px !default; $flexbin-tablet-max: 980px !default; $flexbin-row-height-tablet: 150px !default; $flexbin-space-tablet: $flexbin-space !default; $flexbin-phone-max: 400px !default; $flexbin-row-height-phone: 100px !default; $flexbin-space-phone: $flexbin-space !default;
