Maison > Article > interface Web > Qu'est-ce que la disposition élastique en CSS

Qu'est-ce que la disposition élastique en CSS

王林original: 2020-11-16 11:08:034075parcourir

La mise en page flexible en CSS 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 mise en page flexible est de fournir un moyen plus efficace d'organiser, d'aligner et d'attribuer un espace blanc aux éléments enfants d'un conteneur.

Introduction à la mise en page flexible :

La boîte flexible est un nouveau mode de mise en page de CSS3.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

CSS3 Flexible Box (Flexible Box ou flexbox) est une méthode lorsque la page doit s'adapter à différentes tailles d'écran et Les types de périphériques sont disposés de manière à garantir que les éléments ont un comportement approprié.

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.

Contenu de la boîte flexible :

La boîte flexible est composée d'un conteneur Flex et d'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 flex contient un ou plusieurs éléments enfants flex.

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 éléments enfants flexibles sont généralement affichés dans une rangée dans la flexbox. Par défaut, il n'y a qu'une seule ligne par conteneur.

Les éléments suivants montrent les éléments enfants élastiques affichés dans une rangée, de gauche à droite

<!DOCTYPE html>
<html>
<head>
<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>

Recommandations associées : Tutoriel 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!

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：Pourquoi faut-il placer les CSS dans la tête ?Article suivant：Pourquoi faut-il placer les CSS dans la tête ?

Articles Liés

Voir plus