Cuatro diseños por el precio de uno.

 

 

 

¡Es bastante notable cuando un tweet sobre diseños de flexbox obtiene más de 8.000 me gusta en Twitter!

4 diseños por el precio de 1, gracias flex

formulario css` {
mostrar: flexionar;
envoltura flexible: envoltura;

entrada {
flex: 1 1 10ch;
margen: .5rem;

[tipo=”correo electrónico”] {
flex: 3 1 30ch;
}
}
}
`

ver código fuente en Codepen https://t.co/Q8H5ly2ZIe pic.twitter.com/y6HqxClILZ

– Adam Argyle (@argyleink) 14 de enero de 2020

Ese es el anidamiento CSS “nativo” que se usa allí también, suponiendo que lo obtengamos en algún momento y que la sintaxis se mantenga.

 

Hubo algunos comentarios de que el código es inescrutable. Realmente no lo creo, a mí me dice:

  • Se permite que todos estos insumos se reduzcan y crezcan.
  • Incluso hay espacio alrededor de todo ello.
  • La entrada del correo electrónico debe ser tres veces más grande que las demás.
  • Si es necesario envolverlo, bien, envolverlo.

Un excelente caso de uso para flexbox, que es el mecanismo de diseño adecuado cuando no intentas ser súper preciso con respecto al tamaño de todo.

Hay una publicación de blog (sin firma ‍♂️) con una explicación más extensa.


Esto me recuerda mucho al diseño adaptable de fotos de Tim Van Damme, donde las fotos se organizan solas con Flexbox. No mantienen por completo sus relaciones de aspecto, pero en su mayoría sí lo hacen, gracias literalmente a la flexibilidad de flexbox.

Aquí hay una divertida bifurcación del original. El Blog de la ginebra y el whisky on the rocks

Es como un millón de diseños por el precio de uno, y solo unas pocas líneas de código para empezar.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. El diseño web responsivo cumple diez años.
  2. Comparación de navegadores para diseño responsivo
  3. Diseño inclusivo 24
  4. diseño de formulario

Cuatro diseños por el precio de uno.

Cuatro diseños por el precio de uno.

¡Es bastante notable cuando un tweet sobre diseños de flexbox obtiene más de 8.000 me gusta en Twitter!

programar

es

https://pseint.es/static/images/programar-cuatro-disenos-por-el-precio-de-uno-1195-0.jpg

2024-06-13

 

Cuatro diseños por el precio de uno.
Cuatro diseños por el precio de uno.

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences