CSS3 Flexbox: display: box vs. flexbox vs flex
Hier, j’ai eu un site Web à l’école qui utilise l’instruction CSS 3 flexbox. Je ne l’avais jamais utilisée auparavant. Je l’ai donc cherché sur Google et trouvé beaucoup de styles différents de flexbox instructions.
Certains gars écrivent display: box;, certains utilisent display: flexbox;, et autre display: flex;.
Alors, quelles sont les différences? Que devrais-je utiliser?
Ce sont des styles différents.display: box; est une version de 2009.display: flexbox; est une version de 2011.display: flex; est la version actuelle.
Citation de Paul Irish
Avertissement: Flexbox a subi des révisions majeures. Cet article est obsolète. En résumé, le old standard (Flexbox 2009) , sur lequel cet article est basé , a été implémenté dans Chrome depuis la v4, Firefox depuis la v2 et IE10 bêta.
Depuis lors, le nouveau flexbox standard a fait ses débuts] et a commencé à faire ses débuts dans Chrome 17. Stephan Hay a écrit un guide sur le nouveau flexbox . Depuis lors, la spécification a subi des modifications de nommage qui ont commencé à atterrir dans Chrome 21. Chrome 22 a une implémentation stable de la dernière spécification.
À ce stade, implémenter soit a ses risques , alors soyez conscient.
Here est le blog sur les différentes déclarations flexbox.
This est une entrée de blog de css-astuces sur les différentes versions.
Quand j'utilise flexbox, je l'écris toujours comme ça:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Modifier:
Tout le monde n’a pas encore un navigateur/appareil capable de visualiser flexbox mises en page. Donc, pour les solutions de secours ou les alternatives, il existe cet article par Kenan Yusuf sur la to utilisez flexbox sans utiliser flexbox .
affichage: flex; Est la dernière et meilleure version actuellement, nous pouvons utiliser cela dans notre code.
Alors allez-y.