Qu'est-ce que la flexbox CSS3-tutoriel CSS-php.cn

Qu'est-ce que la flexbox CSS3

WBOY

Libérer： 2021-12-22 11:57:57

original

1983 Les gens l'ont consulté

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".

Qu'est-ce que la flexbox CSS3

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>

Copier après la connexion

Résultat de sortie :
Quest-ce que la flexbox CSS3