Maison > Article > interface Web > Qu'est-ce que la flexbox CSS3
Qu'est-ce que la flexbox CSS3
- WBOYoriginal
- 2021-12-22 11:57:571943parcourir
En CSS3, la boîte flexible est une méthode de mise en page qui permet à la page de s'adapter à différentes tailles d'écran et types d'appareils, offrant ainsi un moyen plus efficace d'allouer de l'espace ; l'attribut d'affichage peut être utilisé pour définir la boîte flexible ; la syntaxe est "display :flex" ou "display:inline-flex".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Qu'est-ce que css3 flexbox
Flexible box est un nouveau mode de mise en page de CSS3.
CSS3 Flexible Box (Flexible Box ou flexbox) est une méthode de mise en page qui garantit que les éléments ont un comportement approprié lorsque la page doit s'adapter à 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.
La boîte flexible comprend un conteneur Flex et un article 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 flexible contient un ou plusieurs sous-éléments flexibles.
Remarque : à l'extérieur du conteneur flexible et à l'intérieur de l'enfant flexible, les éléments 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 sous-éléments flexibles sont généralement affichés sur une seule ligne à l'intérieur de la flexbox. Par défaut, il n'y a qu'une seule ligne par conteneur.
L'élément suivant montre le sous-élément élastique affiché dans une rangée, de gauche à droite :
L'exemple est le suivant :
<html>
<head>
<meta charset="utf-8">
<title>123</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>Résultat de sortie : 
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
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!