Qu'est-ce que la disposition élastique en CSS-tutoriel CSS-php.cn

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

王林

Libérer： 2020-11-16 11:08:03

original

4116 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

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!