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.

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