CSS3 Flexbox : display : box vs. flexbox vs. flex

Question

Hier, j'ai reçu à l'école un site web qui utilise la déclaration CSS 3 flexbox. Je ne l'avais jamais utilisée auparavant. J'ai donc fait quelques recherches sur Google et j'ai trouvé beaucoup de styles différents de l'instruction flexbox.

Certains gars écrivent display: box; quelques utilisations display: flexbox; et d'autres display: flex; .

Quelles sont donc les différences ? Lequel dois-je utiliser ?

Answer 1

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 fait l'objet d'importantes révisions, de sorte que cet article n'est plus à jour. En résumé, le ancienne norme (Flexbox 2009) qui cet article est basé sur, a été implémenté dans Chrome depuis la v4, Firefox depuis la version 2, et IE10 beta.

Depuis lors, la nouvelle norme flexbox a fait ses débuts et a commencé à faire ses débuts dans Chrome 17. Stephan Hay a J'ai écrit un guide sur le nouveau flexbox implémentation . Depuis lors, la spécification a subi des changements de nom qui ont été introduits dans Chrome 21. Chrome 22 dispose d'une implémentation stable de de la dernière spécification.

À ce stade, la mise en œuvre soit a ses risques alors faites attention.

Ici est le blog sur les différentes déclarations flexbox.
Ce site est un article de blog de css-tricks sur les différentes versions.

Lorsque j'utilise le système Flexbox, je l'écris toujours comme ça :

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Edita:
Pourtant, tout le monde ne dispose pas d'un navigateur/appareil capable de visualiser les mises en page flexbox. Pour les solutions de repli ou les alternatives, il existe donc cet article par Kenan Yusuf sur comment utiliser flexbox sans utiliser flexbox .

Answer 2

La spécification a fait l'objet de nombreuses itérations, voir 2009 , 2012 , 2013 et chaque fois que la valeur a été modifiée. display: flex; est le plus récent.

Il s'agit toujours d'un projet de spécification, de sorte que toute mise en œuvre actuelle peut encore changer.

Answer 3

Display : flex ; C'est la dernière et meilleure version actuellement nous pouvons l'utiliser dans notre code.

Alors allez-y.