Conteneur flexible CSS
Élément parent (conteneur)
Comme nous l'avons précisé dans le chapitre précédent, il s'agit d'un conteneur flexible (la zone bleue) avec trois éléments flexibles :
1
2
3
Le conteneur flexible devient flexible en définissant la displaypropriété sur
flex :
Exemple
.flex-container {
display: flex;
}
Les propriétés du conteneur flexible sont :
La propriété flex-direction
La flex-directionpropriété définit dans quelle direction le conteneur souhaite empiler les éléments flexibles.
1
2
3
Exemple
La columnvaleur empile les éléments flexibles verticalement (de haut en bas) :
.flex-container {
display: flex;
flex-direction: column;
}
Exemple
La column-reversevaleur empile les éléments flexibles verticalement (mais de bas en haut) :
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Exemple
La rowvaleur empile les éléments flexibles horizontalement (de gauche à droite) :
.flex-container {
display: flex;
flex-direction: row;
}
Exemple
La row-reversevaleur empile les éléments flexibles horizontalement (mais de droite à gauche) :
.flex-container {
display: flex;
flex-direction: row-reverse;
}
La propriété flex-wrap
La flex-wrappropriété spécifie si les éléments flexibles doivent être renvoyés à la ligne ou non.
Les exemples ci-dessous ont 12 éléments flexibles, pour mieux démontrer la
flex-wrappropriété.
1
2
3
4
5
6
sept
8
9
dix
11
12
Exemple
La wrapvaleur spécifie que les éléments flexibles s'enrouleront si nécessaire :
.flex-container {
display: flex;
flex-wrap: wrap;
}
Exemple
La nowrapvaleur spécifie que les éléments flexibles ne seront pas enveloppés (c'est la valeur par défaut) :
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Exemple
La wrap-reversevaleur spécifie que les éléments flexibles s'enrouleront si nécessaire, dans l'ordre inverse :
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
La propriété flex-flow
La flex-flowpropriété est une propriété abrégée permettant de définir à la fois les propriétés
flex-directionet
flex-wrap.
Exemple
.flex-container {
display: flex;
flex-flow: row wrap;
}
La propriété Justifier-Contenu
La justify-contentpropriété est utilisée pour aligner les éléments flexibles :
1
2
3
Exemple
La centervaleur aligne les éléments flexibles au centre du conteneur :
.flex-container {
display: flex;
justify-content: center;
}
Exemple
La flex-startvaleur aligne les éléments flexibles au début du conteneur (c'est la valeur par défaut) :
.flex-container {
display: flex;
justify-content: flex-start;
}
Exemple
La flex-endvaleur aligne les éléments flexibles à la fin du conteneur :
.flex-container {
display: flex;
justify-content: flex-end;
}
Exemple
La space-aroundvaleur affiche les éléments flexibles avec un espace avant, entre et après les lignes :
.flex-container {
display: flex;
justify-content: space-around;
}
Exemple
La space-betweenvaleur affiche les éléments flexibles avec un espace entre les lignes :
.flex-container {
display: flex;
justify-content: space-between;
}
La propriété align-items
La align-itemspropriété est utilisée pour aligner les éléments flexibles.
1
2
3
Dans ces exemples, nous utilisons un conteneur de 200 pixels de haut, pour mieux démontrer la
align-itemspropriété.
Exemple
La centervaleur aligne les éléments flexibles au milieu du conteneur :
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Exemple
La flex-startvaleur aligne les éléments flexibles en haut du conteneur :
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Exemple
La flex-endvaleur aligne les éléments flexibles au bas du conteneur :
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Exemple
La stretchvaleur étire les éléments flexibles pour remplir le conteneur (c'est la valeur par défaut) :
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Exemple
La baselinevaleur aligne les éléments flexibles tels que leurs lignes de base s'alignent :
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Remarque : l'exemple utilise une taille de police différente pour démontrer que les éléments sont alignés par la ligne de base du texte :
1
2
3
La propriété align-content
La align-contentpropriété est utilisée pour aligner les lignes flexibles.
1
2
3
4
5
6
sept
8
9
dix
11
12
Dans ces exemples, nous utilisons un conteneur de 600 pixels de haut, avec la
flex-wrappropriété définie sur wrap, pour mieux démontrer la align-contentpropriété.
Exemple
La space-betweenvaleur affiche les lignes flexibles avec un espace égal entre elles :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Exemple
La space-aroundvaleur affiche les lignes flexibles avec un espace avant, entre et après :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Exemple
La stretchvaleur étire les lignes flexibles pour occuper l'espace restant (c'est la valeur par défaut) :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Exemple
Les centeraffichages de valeur affichent les lignes flexibles au milieu du conteneur :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Exemple
La flex-startvaleur affiche les lignes flexibles au début du conteneur :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Exemple
La flex-endvaleur affiche les lignes flexibles à la fin du conteneur :
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Centrage parfait
Dans l'exemple suivant, nous allons résoudre un problème de style très courant : le centrage parfait.
SOLUTION : Définissez les propriétés
justify-contentet sur , et l'élément flexible sera parfaitement centré :align-itemscenter
Exemple
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Les propriétés du conteneur CSS Flexbox
Le tableau suivant répertorie toutes les propriétés CSS Flexbox Container :
| Property | Description |
|---|---|
| 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 |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |