Flex, Box ou Flexbox : quelle valeur d'affichage devriez-vous utiliser ?

Le modèle de boîte flexible : naviguer dans les valeurs « flex », « box » et « flexbox »

L'avènement du modèle de boîte flexible introduit un changement de paradigme dans CSS3, en supprimant progressivement les éléments d'affichage tels que l'inline et le block. Cependant, le modèle de boîte flexible est souvent présenté avec différentes valeurs, notamment flex, box et flexbox. Cet article examine les différences entre ces valeurs et fournit des conseils sur leur utilisation.

Affichage : flex

Affichage : flex est la valeur standard actuelle. Il prend en charge les navigateurs modernes, notamment Chrome 29 , Firefox 22 , Safari 7 et Internet Explorer 11 . Flex offre des fonctionnalités avancées pour la gestion de la mise en page, notamment la possibilité d'aligner et de répartir les éléments le long des axes horizontal et vertical.

Affichage : boîte

Affichage : la boîte est une version plus ancienne. valeur qui a été introduite plus tôt dans le développement du modèle de boîte flexible. Il est pris en charge dans la plupart des principaux navigateurs avec des préfixes de fournisseur, mais est généralement progressivement supprimé au profit de display : flex.

Display : flexbox

Display : flexbox est une autre valeur intermédiaire. qui a été introduit pour combler la transition de display: box à display: flex. Il est pris en charge dans les navigateurs les plus récents avec des préfixes de fournisseur et est similaire à display: flex en termes de fonctionnalités.

Quelle valeur utiliser ?

En fin de compte, le choix entre ces les valeurs dépendent des navigateurs que vous devez prendre en charge. Si vous avez besoin d'une compatibilité ascendante, envisagez d'utiliser display: box avec les préfixes du navigateur. Pour une prise en charge plus moderne du navigateur, display: flex est l'option recommandée.

Notes supplémentaires

• Les spécifications de la boîte diffèrent considérablement des spécifications flexbox/flex et peuvent ne conviennent pas toujours pour obtenir les résultats souhaités.
• Certains navigateurs peuvent prendre en charge plusieurs valeurs d'affichage. Cependant, il est recommandé d'inclure les propriétés flex lorsque cela est possible pour une pérennité.
• Consultez caniuse.com/#feat=flexbox pour des informations complètes sur la prise en charge du navigateur.

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!