Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

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 :

gauche
milieu
droite

Dans cet exemple, le bloc avec la class rowflex est le flex-container et les div enfants gauchemilieudroite 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;
}
gauche
milieu
droite

Distribution en colonne inversée.

.rowflex{
    display : flex;
    flex-direction: column-reverse;
}
gauche
milieu
droite

Distribution en ligne

.rowflex{
    display : flex;
}
gauche
milieu
droite

Distribution en ligne inversée

.rowflex{
    display : flex;
    flex-direction: row-reverse;
}
gauche
milieu
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple avec retour à la ligne

.rowflex{
    display : flex;
    flex-wrap: wrap;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple avec retour à la ligne dans le sens inverse

.rowflex{
    display : flex;
    flex-wrap: wrap-reverse;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple sur l’axe horizontal avec la valeur flex-end.

.rowflex{
    display : flex;
    justify-content : flex-end;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple sur l’axe horizontal avec la valeur space-between.

.rowflex{
    display : flex;
    justify-content : space-between;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple sur l’axe horizontal avec la valeur space-around.

.rowflex{
    display : flex;
    justify-content : space-around;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple sur l’axe horizontal avec la valeur center.

.rowflex{
    display : flex;
    justify-content : center;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple avec la valeur flex-end.

.rowflex{
    display : flex;
    height : 60px;
    justify-content : flex-start;
    align-items: flex-end;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple avec la valeur center.

.rowflex{
    display : flex;
    height : 60px;
    justify-content : flex-start;
    align-items: center;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple avec la valeur baseline.

.rowflex{
    display : flex;
    height : 60px;
    justify-content : flex-start;
    align-items: baseline;
}
gauche
milieu 1
milieu 2
milieu 3
droite

Exemple avec la valeur stretch.

.rowflex{
    display : flex;
    height : 60px;
    justify-content : flex-start;
    align-items: strech;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
gauche
milieu 1
milieu 2
milieu 3
droite

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;
}
milieu

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

gauche
milieu 1
milieu 2
blanc
droite

Ordre modifié

gauche
milieu 1
milieu 2
blanc
droite

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;
}
gauche
milieu 1
milieu 2
blanc
droite

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »