Quels sont les avantages et les inconvénients de la disposition flexible-tutoriel CSS-php.cn

Quels sont les avantages et les inconvénients de la disposition flexible

coldplay.xixi

Libérer： 2021-01-28 18:00:51

original

11434 Les gens l'ont consulté

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.

Introduction à la mise en page flex introduite par css3 :

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>

Copier après la connexion

L'effet est le suivant :

Si vous souhaitez en savoir plus sur la programmation, merci de faire attention à la

Quels sont les avantages et les inconvénients de la disposition flexible