Mise en page avec Flex CSS3
Il s’agit d’un nouveau modèle de boîte flexible qui permet une meilleure disposition des éléments (verticale, horizontale), une meilleure gestion d’alignement du contenu (gauche, droite, milieu), une meilleure gestion des espaces disponibles, une réorganisation automatique des boîtes.
Agir au niveau du flex-container
Le flex-container correspond à n’importe quel bloc qui contient des enfants (flex-item) sur lequel on va appliquer le modèle de boîte flexible
Structure HTML
<div class="rowflex"> <div class="gauche">gauche</div> <div class="milieu">milieu</div> <div class="droite">droite</div> </div>
Modèle de boite flexible appliqué au conteneur
.rowflex{
display : flex;
}
Résultat :
Dans cet exemple, le bloc avec la class rowflex est le flex-container et les div enfants gauche, milieu, droite sont les flex-item.
Gérer le sens d’affichage
Vous pouvez distribuer le contenu soit en colonne ou soit en ligne avec la propriété flex-direction qui peut prendre 4 valeurs :
- row (valeur par défaut) : distribution en ligne
- row-reverse : distribution inversée en ligne
- column : distribution verticale
- column-reverse : distribution inversée verticale
Distribution en colonne
.rowflex{
display : flex;
flex-direction: column;
}
Distribution en colonne inversée.
.rowflex{
display : flex;
flex-direction: column-reverse;
}
Distribution en ligne
.rowflex{
display : flex;
}
Distribution en ligne inversée
.rowflex{
display : flex;
flex-direction: row-reverse;
}
Gérer le passage à la ligne
Si l’élément parent (flex-container) possède une taille fluide, à force de réduire sa taille, les éléments enfants (flex-item) peuvent dépasser cette taille. Vous pouvez néanmoins gérer le retour à la ligne des flex-item avec la propriété flex-wrap qui peut prendre 3 valeurs :
- nowrap (valeur par défaut) : pas de passage à la ligne
- wrap : passage à la ligne automatiquement si nécessaire
- wrap-reverse : passage à la ligne en sens inverse
Exemple sans retour à la ligne. La largeur de la boîte parente est de 200px.
.rowflex{
display : flex;
flex-wrap: nowrap;
}
Exemple avec retour à la ligne
.rowflex{
display : flex;
flex-wrap: wrap;
}
Exemple avec retour à la ligne dans le sens inverse
.rowflex{
display : flex;
flex-wrap: wrap-reverse;
}
Ecriture simplifiée : flex-flow
Il existe une autre proporiété qui regroupe l’attribut flex-direction et l’attribut flex-wrap. Il s’agit de la propriété flex-flow.
.rowflex{
display : flex;
flex-flow: row wrap;
}
Gérer l’alignement dans l’axe principal
L’axe principal est définit par l’attribut flex-direction. Soit il s’agit de l’horizontal (par défaut avec display:flex), soit de la verticale (avec flex-direction : column). L’alignement des éléments enfants est gérer par l’attribut justify-content qui peut prendre 5 valeurs :
- flex-start (valeur par défaut) au début de l’axe
- flex-end : à la fin de l’axe
- center : au milieu de l’axe
- space-between : répartition justifiée entre le premier et le dernier élément
- space-around : répartition justifiée du début à la fin
Exemple sur l’axe horizontal avec la valeur flex-start.
.rowflex{
display : flex;
justify-content : flex-start;
}
Exemple sur l’axe horizontal avec la valeur flex-end.
.rowflex{
display : flex;
justify-content : flex-end;
}
Exemple sur l’axe horizontal avec la valeur space-between.
.rowflex{
display : flex;
justify-content : space-between;
}
Exemple sur l’axe horizontal avec la valeur space-around.
.rowflex{
display : flex;
justify-content : space-around;
}
Exemple sur l’axe vertical avec la valeur space-around. La hauteur de conteneur est défini à 300px.
.rowflex{
display : flex;
flex-direction : column;
justify-content : space-around;
}
Exemple sur l’axe horizontal avec la valeur center.
.rowflex{
display : flex;
justify-content : center;
}
Gérer l’alignement dans l’axe secondaire
L’axe secondaire est l’axe perpendiculaire à l’axe principal. Cette axe est gérer par l’attribut align-items qui peut prendre 5 valeurs :
- flex-start au début de l’axe
- flex-end : à la fin de l’axe
- center : au milieu de l’axe
- baseline : alignement sur la ligne de base
- strech : (valeur par défaut) élément étiré dans l’espace disponible
Exemple avec la valeur flex-start.
.rowflex{
display : flex;
height : 60px;
justify-content : flex-start;
align-items: flex-start;
}
Exemple avec la valeur flex-end.
.rowflex{
display : flex;
height : 60px;
justify-content : flex-start;
align-items: flex-end;
}
Exemple avec la valeur center.
.rowflex{
display : flex;
height : 60px;
justify-content : flex-start;
align-items: center;
}
Exemple avec la valeur baseline.
.rowflex{
display : flex;
height : 60px;
justify-content : flex-start;
align-items: baseline;
}
Exemple avec la valeur stretch.
.rowflex{
display : flex;
height : 60px;
justify-content : flex-start;
align-items: strech;
}
Pour cette exemple, l’axe principal est à la vertical et donc l’axe secondaire est sur l’horizontal avec la valeur flex-end.
.rowflex{
display : flex;
flex-direction: column;
width : 400px;
height : 200px;
justify-content : flex-start;
align-items: flex-end;
}
Gérer l’alignement avec passage à la ligne
Si l’axe principal est à l’horizontal mais que le flex-container (conteneur) n’est pas assez large, les éléments flex-item passent à la ligne avec l’attribut ‘flex-wrap:wrap’, et l’alignement ne se fera plus sur l’axe principal mais par rapport au conteneur. Pour gérer ce cas de figure vous pouvez utiliser l’attribut align-content qui peut prendre 7 valeurs :
- flex-start au début du conteneur
- flex-end : à la fin du conteneur
- center : au milieu du conteneur
- baseline : identique à flex-start
- strech : (valeur par défaut) élément étiré dans l’espace disponible
- space-between : répartition justifiée entre le premier et le dernier élément
- space-around : répartition justifiée du début à la fin
Exemple, avec la valeur space-between. Dans ce cas la largeur du conteneur étant limitée à 100px, les enfants passent à la ligne. Pour gérer l’alignement sur toute la hauteur du conteneur, on utile bien l’attribut ‘align-content’ et non pas l’attribut ‘justify-content’ (qui s’applique sur l’axe principal qui est à l’horizontal).
.rowflex{
display : flex;
width : 100px;
height : 300px;
justify-content : flex-start;
flex-wrap : wrap;
align-content: space-between;
}
.rowflex div{
width : 100px;
}
Agir au niveau des flex-item
Les flex-item sont les enfants du flex-container. Le modéle de boîte flex permet aussi d’agir sur ces éléments
Gérer les exceptions pour les alignements
L’ attribut align-items (défini dans le conteneur parent) permet de gérer l’alignement de tous les éléments enfants. Vous pouvez, pour un enfant, appliquer un alignement particulier avec l’attributalign-self qui reprend les mêmes valeurs que align-items
Exemple, avec la valeur space-between appliquée au dernier item.
.rowflex{
display : flex;
flex-direction: column;
width : 400px;
height : 200px;
justify-content : flex-start;
align-items: flex-end;
}
.rowflex .droite{
align-self: flex-start;
}
Gérer le centrage plus facilement
L’attribut « margin:auto » appliqué à un flex-item fonctionne aussi bien sur la hauteur que sur la largeur
Exemple, avec un élément flex-item.
.rowflex{
display : flex;
width : 400px;
height : 200px;
}
.rowflex .milieu{
margin: auto;
}
Gérer l’ordre d’affichage
Il est possible de changer l’ordre d’affichage des blocs en spécifiant sur les éléments enfants l’attribut order . Cela peut s’avérer très pratique en cas de réorganisation des boîtes (responsive design). Plus la valeur de l’attribut sera importante et plus l’élément se retrouvera à la fin de la pile. Par défaut la valeur de order est de zero. Il est possible d’utiliser des valeurs négatives, dans ce cas les éléments seront affichés avant les blocs ayant des valeurs nulles
Exemple de contrôle d’ordre.
.rowflex{
display : flex;
width : 400px;
}
.rowflex .blanc{
order: -1;
}
.rowflex .gauche{
order: 1;
}
.rowflex .droite{
order: 2;
}
Ordre normal
Ordre modifié
Gérer la flexibilité des items
Par défaut, l’espace occupé par chaque item se limite à son contenu. La propriété flex va permettre à un item de s’étirer et d’occuper l’espace disponible. Si tous les items ont leur valeur flex défini à 1, chaque enfant aura le même espace dans le conteneur. La valeur de flex ne correspond pas à une unité mais à une proportion : un item avec un flex de 2 occupera deux fois plus d’espace que les autres
L’attribut flex est un raccourci de trois attributs :
- flex-grow spécifie combien de fois l’élément va s’étirer par rapport au reste des éléments flexibles à l’intérieur du même conteneur. Par défaut cette valeur vaut 0
- flex-shrink : spécifie comment l’élément va diminuer par rapport au reste des éléments flexibles à l’intérieur du même conteneur. Par défaut cette valeurt vaut 1
- flex-basis : spécifie la longueur initiale d’un élément flexible. Par défaut cette valeur est ‘auto’
Les attributs flex-shrink et flex-basis sont optionnels
Exemple de répartition d’espace entre les items d’un flex container
.rowflex{
display : flex;
width : 700px;
}
.rowflex .blanc{
flex: 1;
}
.rowflex .gauche{
flex: 2;
}
.rowflex .droite{
flex: 4;
}
