CSS3 Flexbox
Boîtes souples, ou flexbox , est un nouveau mode de mise en page dans CSS3.
L' utilisation de flexbox assure que les éléments se comportent de façon prévisible lorsque la mise en page doit accueillir différentes tailles d'écran et les différents dispositifs d'affichage.
Pour de nombreuses applications, le modèle de boîte souple apporte une amélioration par rapport au modèle de bloc en ce qu'il ne pas utiliser des flotteurs, ni ne les marges de l'effondrement du conteneur flexible avec les marges de son contenu.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la fonctionnalité.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Concepts
Flexbox se compose de conteneurs flexibles et des éléments flexibles.
Un conteneur flexible est déclarée par le réglage de la display propriété d'un élément soit flex (rendu sous forme de bloc) ou inline-flex (rendu en ligne).
A l'intérieur d'un conteneur flexible il y a un ou plusieurs éléments flexibles.
Remarque: Tout l' extérieur d' un conteneur flexible et à l' intérieur d' un élément flexible est rendu comme d' habitude. Flexbox définit comment les éléments flex sont mis à l'intérieur d'un conteneur flexible.
articles Flex sont positionnés à l'intérieur d'un conteneur flexible le long d'une conduite flexible. Par défaut il n'y a qu'une seule ligne flex par conteneur flex.
L'exemple suivant montre trois éléments flexibles. Ils sont positionnés par défaut: le long de la ligne flex horizontal, de gauche à droite:
Exemple
<!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>Il est également possible de modifier la direction de la ligne flexible.
Si nous avons mis la direction des biens à rtl ( de droite à gauche), le texte est tiré de droite à gauche, et aussi la ligne flex change de direction, qui va changer la mise en page:
Exemple
body {
direction: rtl;
}
.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;
} Direction Flex
Le flex-direction propriété indique la direction des éléments flexibles à l' intérieur du conteneur flexible. La valeur par défaut de flex-direction est row ( de gauche à droite, de haut en bas).
Les autres valeurs sont les suivantes:
-
row-reverse- Si le mode d'écriture (direction) est de gauche à droite, les éléments flex sera aménagé droite à gauche -
column- Si le système d'écriture est horizontal, les éléments de flexion sera mis verticalement -
column-reverse- Identique à la colonne, mais en sens inverse
L'exemple suivant montre le résultat de l' aide de la row-reverse la valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' aide de la column valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' aide de la column-reverse la valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} La propriété justify-contenu
La justify-content propriété aligne horizontalement les éléments du conteneur souple lorsque les éléments ne pas utiliser tout l' espace disponible sur l'axe principal.
Les valeurs possibles sont les suivantes:
-
flex-start- Valeur par défaut. Les éléments sont positionnés au début du conteneur -
flex-end- Les éléments sont positionnés à l'extrémité du récipient -
center- Les articles sont positionnés au centre du récipient - l'
space-between- Les éléments sont positionnés avec un espace entre les lignes -
space-arounddes articles sont positionnés avec un espace avant, entre et après les lignes -
L'exemple suivant montre le résultat de l' utilisation du flex-end valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' utilisation du center valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' aide de l' space-between la valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' aide de l' space-around de la valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Les align-éléments de propriété
Le align-items propriété aligne verticalement les éléments du conteneur souple lorsque les éléments ne pas utiliser tout l' espace disponible sur l'axe des croix.
Les valeurs possibles sont les suivantes:
-
stretch- Valeur par défaut. Les articles sont étirés pour remplir le récipient -
flex-start- Les éléments sont positionnés dans la partie supérieure du récipient -
flex-end- Les éléments sont positionnés au fond du récipient , -
center- Les articles sont positionnés au centre du récipient (verticalement) -
baseline- Les éléments sont positionnés à la base du récipient
L'exemple suivant montre le résultat de l' utilisation du stretch valeur (ce qui est la valeur par défaut):
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' utilisation du flex-start valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' utilisation du flex-end valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' utilisation du center valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' aide de la baseline de baseline la valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} La propriété flex-wrap
Le flex-wrap propriété spécifie si les éléments flexibles doivent envelopper ou non, s'il n'y a pas assez de place pour eux sur une ligne flexible.
Les valeurs possibles sont les suivantes:
-
nowrap- Valeur par défaut. Les éléments flexibles ne seront pas envelopper -
wrap- Les éléments flexibles se terminera si nécessaire -
wrap-reverse- Les éléments flexibles se terminera, si nécessaire, dans l' ordre inverse
L'exemple suivant montre le résultat de l' utilisation du nowrap valeur (ce qui est la valeur par défaut):
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' utilisation du wrap valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} L'exemple suivant montre le résultat de l' utilisation du wrap-reverse la valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} La propriété align-contenu
Le align-content propriété modifie le comportement du flex-wrap propriété. Il est semblable à align-items , mais au lieu d'aligner les éléments flexibles, il aligne les lignes flexibles.
Les valeurs possibles sont les suivantes:
-
stretch- Valeur par défaut. Lignes étirer pour prendre l'espace restant -
flex-start- Les lignes sont emballés vers le début du conteneur flexible -
flex-end- Les lignes sont emballés vers l'extrémité du récipient flexible -
center- Les lignes sont conditionnées vers le centre du récipient flexible -
space-betweenl'space-between- Lignes sont répartis uniformément dans le récipient flexible - l'
space-around- Les lignes sont réparties uniformément dans le récipient flexible, avec des espaces de demi-taille à chaque extrémité
L'exemple suivant montre le résultat de l' utilisation du center valeur:
Exemple
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Flex Propriétés de l'élément
Commande
La order propriété spécifie l'ordre d'un élément flexible par rapport au reste des éléments flexibles à l' intérieur du même conteneur:
Exemple
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Marge
Réglage de la margin: auto; absorbera l' espace supplémentaire. Elle peut être utilisée pour pousser les éléments de flexion dans différentes positions.
Dans l'exemple suivant nous avons mis margin-right: auto; sur le premier élément flexible. Cela entraînera tout l'espace supplémentaire pour être absorbé à droite de cet élément:
Exemple
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} centrage parfait
Dans l'exemple suivant, nous allons résoudre un problème presque tous les jours: un centrage parfait.
Il est très facile avec FlexBox. Réglage de la margin: auto; fera l'objet parfaitement centré dans les deux axes:
Exemple
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} alignez-auto
Le align-self propriété d'éléments flexibles remplace align-éléments de la propriété du conteneur flexible pour cet article. Il a les mêmes valeurs possibles que le align-items matériels.
L'exemple suivant définit différentes valeurs align-auto à chaque élément flexible:
Exemple
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} fléchir
Le flex propriété spécifie la longueur de l'élément flexible, par rapport au reste des éléments flexibles à l' intérieur du même conteneur.
Dans l'exemple suivant, le premier élément flex consomme 2/4 de l'espace libre, et les deux autres éléments flex consommera 1/4 de l'espace libre de chacun:
Exemple
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Autres exemples
Créer un site réactif avec FlexBox
Cet exemple montre comment créer un site Web avec la mise en page en réponse FlexBox.
CSS3 ēno Propriétés
Le tableau suivant dresse la liste des propriétés CSS utilisés avec FlexBox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |