Maison > Article > interface Web > Quels sont les avantages et les inconvénients de la disposition flexible
Quels sont les avantages et les inconvénients de la disposition flexible
- coldplay.xixioriginal
- 2021-01-25 17:29:1211432parcourir
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.
- L'inconvénient est le suivant : la compatibilité du navigateur est relativement mauvaise et ne peut être compatible qu'avec ie9 et supérieur.
- Introduction à la mise en page flex introduite par css3 : La flex box est composée d'un conteneur flex (Flex conteneur) et d'un flex sub -element (élément Flex). Un conteneur flexible est défini comme un conteneur flexible en définissant la valeur de la propriété display sur flex ou inline-flex. Un conteneur flex contient un ou plusieurs éléments enfants flex.
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
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!
Articles Liés
Voir plus- Explication détaillée des utilisations de CSS Flex
- Disposition CSS Flex pour un défilement fluide
- Espace de mise en page CSS Flex entre la dernière ligne aligné à gauche
- Que sont la disposition en grille CSS et la disposition flexible ?
- Quels sont les avantages et les inconvénients de la mise en page CSS Flex