Quatre dispositions pour le prix d'un

Assez notable lorsqu'un tweet sur une disposition de Flexbox obtient 8k likes sur Twitter!

4 dispositions pour le prix de 1, merci Flex?

CSS`
formulaire {
Affichage: flex;
wrap flex: enveloppement;

&> entrée {
Flex: 1 1 10ch;
marge: .5rem;

& [type = "e-mail"] {
Flex: 3 1 30ch;
}
}
}
'

Afficher la source sur codepen? https: //t.co/q8h5ly2zie pic.twitter.com/y6hqxclilz

- Adam Argyle (@argyleink) 14 janvier 2020

C'est également le CSS «natif» qui y niche, en supposant que nous l'obtenons à un moment donné et la syntaxe tient.

Il y a eu des commentaires selon lesquels le code est impénétrable. Je ne pense pas vraiment, pour moi, ça dit:

• Toutes ces entrées sont autorisées à rétrécir et à grandir
• Il y a même un espacement autour de tout
• L'entrée par e-mail doit être trois fois plus grande que les autres
• S'il a besoin d'envelopper, bien, enveloppez.

Un excellent cas d'utilisation pour Flexbox, qui est le bon mécanisme de mise en page lorsque vous n'essayez pas d'être super précis sur la taille de tout.

Il y a un article de blog (pas de Byline? ‍️) avec une explication plus longue.

Cela me rappelle beaucoup la disposition de la photo adaptative de Tim van Damme où les photos se présentent avec Flexbox. Ils ne gardent pas entièrement leurs ratios d'aspect, mais ils le font surtout, grâce à la flexibilité de Flexbox.

Voici une fourche amusante de l'original.

C'est comme une mise en page des zillions pour le prix d'un, et juste quelques lignes de code pour démarrer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!