recherche

Maison >interface Web >tutoriel CSS >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.xixi
coldplay.xixioriginal
2021-01-25 17:29:1211488parcourir

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

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

formation php

colonne!

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!

php css css3 display flex
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment mettre du texte en gras en CSSArticle suivant：Comment mettre du texte en gras en CSS

Articles Liés

Voir plus