IP Girl
  1. IP Girl
  3. CSS3 Flexbox: affichage: boîte vs flexbox vs flex
Intereting Posts
Meilleures pratiques pour la gestion des versions d’API? Comment créez-vous des notifications personnalisées dans Swift 3? Publication de calendriers Outlook. Quel est le paramètre côté serveur pour la fréquence de synchronisation? Manière appropriée de rejeter DialogFragment pendant que l’application est en arrière-plan Pénalité de performance pour travailler avec des interfaces en C ++? Dois-je obscurcir le secret du consommateur OAuth stocké par l’application Android? Comment désactiver les avertissements #pragma? Comment tester une connexion Internet avec bash? MySQL peut-il remplacer plusieurs caractères? Indentation dans Go: tabs ou espaces? Comment puis-je voir la valeur actuelle de ma variable $ PATH sur OS X? Dans AngularJS, quelle est la différence entre ng-pristine et ng-dirty? Qu’est-ce qu’une erreur d’extension implicite divergente? Sourcetree demande constamment à s’authentifier avec Mercurial (Kiln)? Alignement vertical du contenu de la ligne DataGrid

CSS3 Flexbox: affichage: boîte vs flexbox vs flex

Je suis devenu hier un site Web dans l’école qui utilise la déclaration css3 flexbox. Je n’ai jamais utilisé ça avant. Donc, je google un peu. Et trouvé beaucoup de styles différents des instructions flexbox.
Certains gars écrivent l’ display: box; , certains utilisent l’ display: flexbox; et autre display: flex; .

Alors, quels sont les différents? Que dois-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

Attention: Flexbox a subi des révisions majeures, donc cet article est obsolète. En résumé, l’ ancienne norme (Flexbox 2009) , sur laquelle cet article est basé, a été implémentée dans Chrome depuis la version 4, Firefox depuis la version 2 et IE10 bêta.

Depuis lors, la nouvelle norme Flexbox a fait ses débuts dans Chrome 17. Stephan Hay a écrit un guide sur la nouvelle implémentation de la Flexbox . Depuis lors, les spécifications ont subi des changements de noms qui ont commencé à apparaître dans Chrome 21. Chrome 22 a une implémentation stable des dernières spécifications.

À ce stade, la mise en œuvre soit présente des risques , alors soyez conscient.

Voici le blog sur les différentes déclarations Flexbox.
Ceci est une entrée de blog par css-sortingcks 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:
Cependant, tout le monde ne dispose pas d’un navigateur / périphérique capable de visualiser les mises en page flexbox. Donc, pour les solutions de rechange ou les alternatives, il y a cet article de Kenan Yusuf sur la manière d’ utiliser la flexbox sans utiliser la flexbox .

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

Il s’agit toujours d’un projet de spécification, de sorte que toute implémentation actuelle peut encore changer.

Les boîtes flexibles, ou flexbox, sont un nouveau mode de présentation dans CSS3

L’utilisation de flexbox garantit que les éléments se comportent de manière prévisible lorsque la mise en page doit prendre en charge différentes tailles d’écran et différents périphériques d’affichage

Pour de nombreuses applications, le modèle de boîte flexible offre une amélioration par rapport au modèle de bloc en ce sens qu’il n’utilise pas de valeurs flottantes, et que les marges du conteneur Flex ne se réduisent pas avec les marges de son contenu. 

      
 
flex item 1
 
flex item 2
 
flex item 3

Sortie:

entrer la description de l'image ici

affichage: flex; Est la dernière et meilleure version actuellement, nous pouvons l’utiliser dans notre code.

Alors, allez-y.