Partagez des exemples d'utilisation de Flexbox pour obtenir des effets de centrage en CSS

Cet article partage des exemples d'utilisation de Flexbox pour obtenir des effets de centrage en CSS. Faites attention aux problèmes de compatibilité dans les navigateurs IE. Les amis dans le besoin peuvent s'y référer

L'orientation future du développement de CSS est d'utiliser Flexbox. . Conçu pour résoudre des problèmes courants tels que le centrage vertical. Veuillez noter que Flexbox a plusieurs façons de centrer. Il peut également être utilisé pour diviser des colonnes et résoudre des problèmes de mise en page étranges.

.Center-Container.is-Flexbox {   
  display: -webkit-box;   
  display: -moz-box;   
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;   
  -webkit-box-align: center;   
     -moz-box-align: center;   
     -ms-flex-align: center;   
  -webkit-align-items: center;   
          align-items: center;   
  -webkit-box-pack: center;   
     -moz-box-pack: center;   
     -ms-flex-pack: center;   
  -webkit-justify-content: center;   
          justify-content: center;   
}

Avantages :

Le contenu peut avoir n'importe quelle hauteur et largeur, et le débordement peut également bien fonctionner
Peut être utilisé pour diverses compétences avancées en matière de mise en page

Remarque également : IE8-9 n'est pas pris en charge

Nécessité d'écrire des styles sur le corps ou de nécessiter des conteneurs supplémentaires
Divers préfixes de fabricant sont requis pour être compatible avec navigateurs modernes
Il peut y avoir des problèmes de performances potentiels

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!