Maison > Article > interface Web > Quels sont les avantages et les inconvénients de la disposition flexible
Les avantages et les inconvénients de la disposition flexible sont : 1. L'avantage de la disposition flexible est qu'elle est facile à utiliser et qu'il est facile d'obtenir un certain effet de disposition selon les règles de flexibilité ; cette compatibilité du navigateur est relativement mauvaise et ne peut être compatible qu'avec ie9 et supérieur.
L'environnement d'exploitation de cet article : Acer S40-51, Tutoriel vidéo HBuilder
Les avantages et les inconvénients de la disposition flexible sont : La boîte flexible CSS3 (Flexible Box ou flexbox) est un type de boîte flexible qui doit être adaptée lorsque la page a besoin d'une méthode de mise en page qui garantit que les éléments se comportent de manière appropriée sur différentes tailles d'écran et types d'appareils.
Le but de l'introduction du modèle de disposition flexbox est de fournir un moyen plus efficace d'organiser, d'aligner et d'attribuer un espace vide aux sous-éléments d'un conteneur. Avantages et inconvénients de la mise en page flex introduite par CSS3 :
L'avantage est qu'elle est facile à utiliser et qu'il est facile d'obtenir un certain effet de mise en page en fonction règles flexibles.
Remarque : L'extérieur du conteneur flexible et l'intérieur du sous-élément flexible sont rendus normalement. La zone flex définit uniquement la façon dont les éléments enfants flex sont disposés dans le conteneur flex. Les éléments enfants Flex sont généralement affichés dans une rangée dans la zone flexible. Par défaut, il n'y a qu'une seule ligne par conteneur.
Exemple :<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>
L'effet est le suivant :
Si vous souhaitez en savoir plus sur la programmation, merci de faire attention à la formation phpCe 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!