English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 flexible Box ou flexbox est un nouveau modèle de layout pour créer des conceptions d'interface utilisateur plus flexibles.
Flexible box, généralement appelé flexbox, est un module CSS3Un nouveau modèle de layout introduit dans CSS, utilisé pour créer des interfaces utilisateur flexibles avec plusieurs lignes et colonnes, sans utiliser de pourcentages ou de valeurs de longueur fixes.3 Le modèle de layout flex fournit un mécanisme simple et puissant pour gérer la distribution de l'espace et l'alignement du contenu via les feuilles de style, sans interférer avec le balisage réel.
L'exemple suivant montre comment créer un布局 en trois colonnes à l'aide du modèle de layout flex, où chaque colonne a une largeur et une hauteur égales.
<!DOCTYPE html>
<html lang="en">
<head>-8<meta charset="utf
">3 <title>CSS/Trois Colonnes Flex Égales<
title>
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
border: 1px solide #80808<style>
}
.flex-container div {
background: #dbdfe5;
-webkit-flex: 1; /* Safari */
-0;-flex: 1; /* ms 10 */
flex: 1;
}
Item/IE
Item/style> 1head>Item 2head>Item 3Item/<Testez et voyez‹/›html>-Si vous regardez attentivement le code d'exemple ci-dessus, vous remarquerez que nous n'avons pas dans .flexInternes du conteneur<div>-Vous pouvez spécifier toute largeur sur le dessus, mais vous pouvez voir dans la sortie que la largeur de chaque colonne est exactement égale à l'élément parent.flex
Comment fonctionne la mise en page FlexFlexbox est composé de conteneurs Flex et d'éléments Flex. Vous pouvez utiliserDisplayL'attribut des éléments est défini sur flex (génère Block-level-Flex (génère un conteneur Flex) ou inlineInline-BlockPour créer un conteneur Flex, utilisez (un conteneur inline Flex) pour créer un conteneur Flex. Tous les éléments enfants du conteneur flex deviennent automatiquement des éléments flex, et sont mis en page en utilisant le modèle de mise en page flex. DuFloat,ClearetVertical-alignLes éléments qui ont des propriétés élastiques n'ont pas d'effet.
Les éléments extensibles suivant cetteflex-DirectionLa ligne élastique spécifiée par la propriété se situe à l'intérieur du conteneur élastique. Par défaut, chaque conteneur flex n'a qu'une seule ligne élastique, dont la direction est la même que l'axe inline du mode d'écriture actuel ouMême que la direction de texte.L'image suivante vous aidera à comprendre les termes de mise en page Flex.
Dans le modèle de boîte CSS standard, les éléments sont généralement affichés dans l'ordre de leur apparition dans les balises HTML sous-jacentes. La mise en page Flex permet de contrôler la direction du flux dans un conteneur Flex, de sorte que les éléments peuvent être disposés dans n'importe quelle direction de flux, allant à gauche, à droite, en bas ou même vers le haut.
Vous pouvez utiliserflex-DirectionLa propriété spécifie le flux des éléments flex dans le conteneur flex. La valeur par défaut row est la même que le mode d'écriture actuel ou la direction du texte, par exemple, de gauche à droite pour l'anglais.
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: rangée-Reverse;
display: flex;
flex-direction: rangée-Reverse;
border: 1px solide #666;
}Testez et voyez‹/›De la même manière, vous pouvez afficher les éléments élastiques sous forme de colonnes dans un conteneur élastique, plutôt que d'utiliser flex-La valeur de la propriété direction, comme indiqué ci-dessous :
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: colonne;
display: flex;
flex-direction: colonne;
}Testez et voyez‹/›L'un des aspects les plus importants de la mise en page élastique est la capacité des éléments élastiques à changer leur largeur ou leur hauteur pour remplir l'espace disponible. Cela se fait parflexC'est ce que l'on appelle une propriété abrégée.flex-Grow,flex-ShrinkEtflex-BasisPropriété.
Le conteneur élastique distribue l'espace disponible proportionnellement à ses facteurs de croissance élastique à ses éléments, ou les rétrécit pour éviter le débordement en proportion de son coefficient de contraction élastique.
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
padding: 10px;
background: #dbdfe5;
}
.item1, .item3 {
-webkit-flex: 1; /* Safari */
flex: 1;
}
.item2 {
-webkit-flex: 2; /* Safari */
flex: 2;
}Testez et voyez‹/›In the above example, the first and third elastic items will occupy1/4i.e.,1/(1+1+2) of free space, while the second elastic item will occupy1/2i.e.,2/(1+1+2of free space. Similarly, you can use this simple technique to create other flexible layouts.
Attention :It is strongly recommended to use shorthand properties instead of individual flex properties, as it can correctly reset unspecified components.
There are four propertiesjustify-content,align-content,align-itemsetalign-selfIts purpose is to specify the alignment of elastic items within the elastic container. The first three apply to flex containers, while the last one applies to a single flex item.
Use justify-The content property can align elastic items along the main axis of the elastic container (i.e., horizontally). It is usually used when the elastic items do not use all the available space on the main axis.
justify-The content property accepts the following values:
flex-start-Default value. Elastic items are placed at the start of the main axis.
flex-end -The Flex items are located at the end of the main axis.
center - The Flex items are placed in the center of the main axis with equal free space at both ends. If the remaining free space is negative, i.e., the items overflow, the elastic items will overflow equally in both directions.
space-between -of the Flex items are evenly distributed along the main axis, with the first item placed at the main starting edge and the last placed at the main end. If the items overflow or there is only one item, this value equals flex-start.
space-around -Flex items are evenly distributed on both ends with half the space. If they overflow or there is only one item, this value equals center.
The following example will show you different justify-The content property value has an impact on the multi-column flex container with fixed width.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solide #666;
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}
.item1 {
width: 75px;
background: #e84d51;
}
.item2 {
width: 125px;
background: #7ed636;
}
.item3 {
width: 175px;
background: #2f97ff;
}Testez et voyez‹/›align can be used-items or align-self property aligns flex items along the horizontal axis of the Flex container (i.e., the vertical direction). However, when using align-items when applied to a flex container, the align-The self property applies to a single flex item and overrides align-items. Both of these properties accept the following values:
flex-start —Flex items are located at the start of the cross axis.
flex-end —Flex items are located at the end of the cross axis.
center —Elastic items are placed at the center of the horizontal axis, with equal available space at both ends. If the remaining free space is negative, i.e., the project overflows, the elastic items will overflow equally in both directions.
baseline —Each elastic project's text baseline (or inline axis) aligns with the baseline of the largest elastic project.font-size.
Stretch —Les éléments élastiques s'étendent pour remplir la ligne ou la colonne actuelle, sauf s'ils sont bloqués par la largeur ou la hauteur minimale et maximale. align-La valeur par défaut de l'attribut items.
L'exemple suivant vous montrera différents align-La valeur de l'attribut items a un effet sur les conteneurs flex de colonnes de hauteur fixe.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solide #666;
/* Safari */
display: -webkit-flex;
-webkit-align-items
display: flex;
align-items
}
.item1 {
width: 75px;
height: 100px;
background: #e84d51;
}
.item2 {
width: 125px;
height: 200px;
background: #7ed636;
}
.item3 {
width: 175px;
height: 150px;
background: #2f97ff;
}Testez et voyez‹/›items: center;-Vous pouvez également répartir l'espace disponible sur l'axe horizontal des conteneurs flex de plusieurs lignes ou colonnes. L'attribut align-content pour aligner les lignes du conteneur flex, par exemple, si il y a de l'espace libre sur l'axe horizontal, alors les lignes du conteneur flex de plusieurs lignes justify
L'alignement content, similaire à l'alignement d'un seul élément sur l'axe principal.-L'attribut content accepte la même valeur que justify-content, mais l'applique à l'axe horizontal au lieu de l'axe principal. Il accepte également une autre valeur :
StretchL'espace disponible est réparti uniformément entre toutes les lignes ou colonnes pour augmenter sa taille croisée. Si l'espace libre restant est négatif, cette valeur est égale à flex-start.
L'exemple suivant vous montrera différents align-L'effet de la valeur de l'attribut content sur les conteneurs flex de hauteur fixe.
.flex-container {
width: 500px;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
border: 1px solide #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.flex-container div {
width: 150px;
height: 100px;
background: #dbdfe5;
}Testez et voyez‹/›En plus de modifier le flux dans le conteneur flex, vous pouvez également modifierorderLa propriété order affiche l'ordre d'un seul élément flex. Cette propriété accepte des entiers positifs ou négatifs en tant que valeurs. Par défaut, tous les éléments flex sont affichés et disposés suivant l'ordre dans lequel ils apparaissent dans le balisage HTML, car la valeur par défaut de order est 0.
L'exemple suivant vous montrera comment spécifier l'ordre d'un seul élément élastique.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solide #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.flex-container div {
padding: 10px;
width: 130px;
}
.item1 {
background: #e84d51;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
background: #7ed636;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
background: #2f97ff;
-webkit-order: -1; /* Safari 6.1+ */
order: -1;
}Testez et voyez‹/›Attention :Les éléments ayant la valeur d'ordre la plus basse sont placés en premier, et ceux ayant la valeur d'ordre la plus haute sont placés en dernier. Les éléments ayant la même valeur d'ordre s'affichent dans l'ordre dans lequel ils apparaissent dans le document source.
Généralement, l'alignement vertical des blocs de contenu implique l'utilisation de JavaScript ou de quelques techniques CSS rudimentaires. Cependant, l'utilisation de flexbox permet de réaliser cette opération sans nécessiter d'ajustement.
L'exemple suivant vous montrera comment utiliser CSS3La fonction de boîte flexible permet de centrer horizontalement et verticalement les blocs de contenu au milieu.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solide #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.item {
width: 300px;
padding: 25px;
margin: auto;
background: #f0e68c;
}Testez et voyez‹/›Par défaut, le conteneur élastique ne montre qu'une ligne ou une colonne d'éléments flex. Maisflex-wrapSi il n'y a pas assez d'espace sur une ligne flexible, vous pouvez utiliser les attributs du conteneur flex pour spécifier si les éléments flex doivent être renversés en plusieurs lignes.
Ce flex-L'attribut wrap accepte les valeurs suivantes :
nowrap-Valeur par défaut. Les éléments de flexibilité sont placés en une ligne. S'il n'y a pas assez d'espace sur la ligne flexible, cela peut entraîner un débordement.
wrap —Le conteneur flex décompose ses éléments flex en plusieurs lignes, de la même manière que le texte trop large pour tenir sur une ligne donnée peut être décomposé sur une nouvelle ligne.
wrap-reverse —Les éléments de flexibilité peuvent être renversés en cas de besoin, mais dans l'ordre inverse, c'est-à-dire,point de départ croisé(cross-start)etpoint final croisé(cross-end)Les directions seront inversées.
Les exemples suivants vous montreront comment utiliser flex-L'attribut wrap affiche les éléments flex dans une ou plusieurs lignes du conteneur flex.
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solide #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.flex-container div{
width: 130px;
padding: 10px;
background: #dbdfe5;
}Testez et voyez‹/›Attention :Vous pouvez également utiliser les propriétés CSS abrégées dans une seule déclarationflex-flowDéfinir flex-direction et flex-wrap。它接受与各个属性相同的值，并且值可以为任意顺序。