Boîte flexible CSS3 (Boîte flexible)

CSS3 Flex Box

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

Contenu de la flex box CSS3

La flex box est composée d'un conteneur flex (conteneur Flex) et d'un élément enfant flex (é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 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.

L'élément suivant montre que le sous-élément élastique est affiché dans une rangée, de gauche à droite :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>

Ce qui suit expliquera chaque attribut de l'ancienne version à travers un exemple simple :

<html>
<head>
<meta charset="utf-8">
<style>
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}
</style>
</head>
<body>
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

Le résultat ci-dessus est normal. Jetez un œil à l'exemple suivant :

<html>
<head>
<meta charset="utf-8">
<style>
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}
div{
    display:-webkit-box;
    display:box;
}
</style>
</head>
<body>
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

Vous voyez, maintenant chaque élément p est devenu une boîte. C'est la magie de la mise en page flexible !

Dans ce qui précède, nous définissons l'affichage de l'élément div sur box, qui est l'ancienne version de la mise en page flexible. Pour les anciennes versions de navigateur, nous devons ajouter le préfixe -webkit-.

L'ancienne version de la disposition élastique a deux valeurs d'attribut :

box : affiche le modèle de boîte de conteneur sous forme de boîte d'expansion élastique au niveau du bloc : affiche le modèle de boîte de conteneur sous forme de boîte ; boîte d'expansion élastique au niveau en ligne Affichage de la boîte

PS : Nous savons que le niveau bloc occupe toute la ligne, comme l'élément div tandis que le niveau en ligne n'occupe pas toute la ligne, comme l'élément span. Mais nous avons aménagé la boîte entière de manière à ce qu’aucun d’entre eux ne l’occupe, en gardant sa cohérence. Tout comme notre exemple ci-dessus, si une case est définie pour l'élément div, alors l'élément p à l'intérieur de l'élément div ne sera pas occupé.

attribut box-orient

attribut box-orient réalise principalement la direction du flux des éléments à l'intérieur de la boîte.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

Le résultat à ce moment est un arrangement vertical :

Les valeurs d'attributde cet attribut sont :

horizontal : éléments télescopiques de gauche à droite disposition horizontale verticale : les éléments flexibles sont disposés verticalement de haut en bas sur l'axe en ligne : les éléments flexibles sont disposés le long de l'axe en ligne et affichés sur l'axe du bloc : les éléments flexibles sont disposés et affichés le long de l'axe du bloc

Vous souhaiterez peut-être essayer : l'axe horizontal et l'axe en ligne sont disposés horizontalement, tandis que l'axe vertical et l'axe de bloc sont disposés verticalement.

attribut box-direction

L'attribut box-direction est principalement utilisé pour définir l'ordre de flux dans le conteneur évolutif.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

Les valeurs d'attributde cet attribut sont :

normal : ordre normal, valeur par défaut reverse : ordre inversé

attribut box-pack

box-pack Propriétés utilisées pour distribuer des éléments évolutifs.

Les valeurs d'attribut de cet attribut sont :

start : Les éléments flex sont alignés avec le point de départ end : Les éléments flex sont alignés avec le centre du point final : Les éléments flex sont aligné avec le point central justifier : Les éléments flexibles sont alignés avec le point central Distribution des liens

Essayons l'effet de chaque valeur d'attribut :

valeur d'attribut de départ :

div{
    -webkit-box-pack:start;
    box-pack:start;
}

2. Valeur de l'attribut de fin :

div{
    -webkit-box-pack:
end
;
    box-pack:
end
;
}

3. Valeur de l'attribut central :

div{
    -webkit-box-pack:
center
;
    box-pack:
center
;
}

4. >PS : Le même principe est vrai dans le sens vertical, mais si la hauteur est automatique, l'effet ne sera pas produit. Vous devez donc définir une hauteur fixe pour la hauteur (de préférence supérieure à la valeur par défaut). À ce stade, vous pouvez voir l’effet dans la direction verticale. Je n’entrerai pas dans les détails ici.

attribut box-align

L'attribut box-align est utilisé pour gérer l'espace supplémentaire du conteneur évolutif.

Les valeurs d'attributde cet attribut sont les suivantes :

Début： Le projet évolutif est basé sur le haut, libérant l'espace supplémentaire dans la partie inférieure. Fin ： Le projet évolutif est basé sur en bas, libérer l'espace supplémentaire dans la partie supérieure Centre ： Le projet évolutif est basé sur le bas La partie centrale est utilisée comme ligne de base et l'espace supplémentaire dans les parties supérieure et inférieure est libéré en moyenne Baseline: The flex. Le projet est basé sur la ligne de base et l'espace supplémentaire est effacé. Stretch : le projet flex remplit tout le conteneur. La valeur par défaut est

De même, nous essaierons chaque valeur d'attribut :

<. 🎜>Valeur de l'attribut 1.start

div{
    -webkit-box-pack:
justify
;
    box-pack:
justify
;
}

Valeur de l'attribut 2.end

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

Valeur de l'attribut 3.center

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
end
;
    box-align:
end
;
}

Valeur de l'attribut 4.baseline

Si box-orient est en ligne sur un seul axe ou horizontal, tous les éléments enfants sont alignés sur leur ligne de base.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
center
;
    box-align:
center
;
}

Et si box-orient est un axe de bloc ou vertical, alors tous les éléments enfants seront centrés et disposés verticalement.

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

Valeur de l'attribut 5.stretch

Tous les éléments enfants s'étirent pour remplir le bloc conteneur.

div{   
 display:-webkit-box;  
   display:box;  
     -webkit-box-orient:vertical;  
       box-orient:vertical;   
        -webkit-box-align:baseline;  
          box-align:baseline;
          }

Propriété box-flex

La propriété box-flex peut utiliser des nombres à virgule flottante pour allouer la proportion d'éléments évolutifs. Cet attribut est défini pour les éléments du conteneur. Ils attribueront leur proportion en fonction de la largeur du conteneur parent :

div{   
 display:-webkit-box;  
   display:box;  
     -webkit-box-align:stretch;    
             box-align:stretch
;}

Bien entendu, certains éléments peuvent avoir une largeur fixe, et d'autres éléments seront également alloués. . La largeur restante, par exemple, le premier élément p ici est défini sur une largeur fixe :

p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

Pour une utilisation plus approfondie, vous pouvez l'essayer vous-même lentement.

attribut box-ordinal-group

l'attribut box-ordinal-group peut définir la position d'affichage de l'élément flexible.

p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

Vous pouvez voir : le premier élément p est classé deuxième, le deuxième élément p est classé troisième et le troisième élément p est classé premier. Cet attribut peut être défini individuellement pour un élément p, et les autres éléments seront modifiés dans l'ordre d'origine.

OK, alors tous les attributs de l'ancienne version ont été brièvement présentés. Pour une utilisation plus combinée, vous pouvez la pratiquer vous-même si nécessaire.

Voici un exemple de centrage horizontal et vertical :

p:nth-child(1){
    -webkit-box-ordinal-group:2;
    box-ordinal-group:2;
}p:nth-child(2){
    -webkit-box-ordinal-group:3;
    box-ordinal-group:3;
}p:nth-child(3){
    -webkit-box-ordinal-group:1;
    box-ordinal-group:1;
}

A ce moment, nous définissons une hauteur fixe pour l'élément p :

div{   
 display:-webkit-box;  
   display:box;   
    height:500px; 
       border:1px solid #f00; 
          -webkit-box-pack:center;  
            box-pack:center;   
             -webkit-box-align:center;  
               box-align:center;
               }

Attribut de boîte flexible CSS3

Suivant Le tableau répertorie les attributs couramment utilisés dans les boîtes flexibles :

Attributs 🎜>affichage pour spécifier le type de zone d'élément HTML.

flex-direction spécifie la disposition des sous-éléments dans le conteneur flex

justify-content définit l'alignement des éléments de la boîte flexible dans la direction de l'axe principal (axe horizontal).

align-items Définit l'alignement des éléments de la boîte flexible dans la direction de l'axe latéral (axe vertical).

flex-wrap Définit si les éléments enfants de la boîte flexible s'enroulent lorsqu'ils dépassent le conteneur parent.

align-content Modifier le comportement de l'attribut flex-wrap, similaire à align-items, mais au lieu de définir l'alignement des sous-éléments, définir l'alignement des lignes

flex-flow Le abréviation

<> Order définit l'ordre de disposition des sous-éléments de la boîte élastique. à utiliser sur les éléments enfants flexibles. Remplacez la propriété align-items du conteneur.

Flex définit le sous-élément de la boîte élastique pour allouer de l'espace.

Formation continue

nouveau fichier

<html> <head> <meta charset="utf-8"> <style> p{ width:150px; border:3px solid lightblue; background:lightgreen; padding:5px; margin:5px; } div{ display:-webkit-box; display:box; } </style> </head> <body> <div> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Boîte flexible CSS3 (Boîte flexible)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]