Aller au contenu

Les flexbox

Le flexbox est une méthode qui consiste à créer une disposition à l'aide de boîtes flexibles... d'où flexbox. On crée une boîte parent, dans laquelle on place des boîtes enfants. Ensuite, on indique comment la flexibilité des boîtes doit réagir lors d'un redimensionnement de l'écran.

Flexbox simple sur une ligne

Le flexbox le plus simple est de créer le contenant (boîte parent) flexible, dans lequelle on crée des enfants.

Flexbox démo 1

HTML

<div class="div-flex-contenant">
    <div class="div-flex-item-small">Flex item un</div>
    <div class="div-flex-item-large">Flex item deux</div>
    <div class="div-flex-item-small">Flex item trois</div>
    <div class="div-flex-item-large">Flex item quatre</div>
    <div class="div-flex-item-small">Flex item cinq</div>
    <div class="div-flex-item-large">Flex item six</div>
</div>

CSS

.div-flex-contenant{
    background-color: plum;
    width: 100%;

    display: flex;
}

.div-flex-item-small {

    background-color: lightgray;
    margin: 0.8rem;
    min-height: 12em;
    flex-basis: 6em;
}

.div-flex-item-large {

    background-color: lightgray;
    margin: 0.8rem;
    min-height: 12em;
    flex-basis: 12em;
}

En donnant ainsi la propriété display:flex au contenant parent, on crée un flexbox avec des éléments flexibles!

Par contre, avez-vous remarqué que lorsque la fenêtre est à sa taille minimale, les éléments débordent ?

Debordement

Pour régler ce problème, on doit indiquer au parent si les enfants ont le droit de d'effectuer un retour à la ligne lorsqu'ils atteignent la limite possible d'affichage à l'intérieur du parent.

Empêcher le débordement des enfants

Pour permettre aux enfant d'effectuer un retour à la ligne, on doit utiliser la propriété flex-wrap dans la définition du parent.

On reprend donc notre exemple précédent, en ajoutant cette simple propriété au bloc parent :

CSS

.div-flex-contenant{
    background-color: plum;
    width: 100%;

    display: flex;  /*crée un flexbox*/
    flex-wrap: wrap;    /*permet aux items de changer de ligne lorsqu'il manque de place*/
}

Résultat:

Flexbox wrap

Taille des enfants: flex-basis VS width

Par défaut, une boîte enfant aura une taille égale à son contenu. Mais on peut évidemment modifier cela.

Avec les options de largeur (width), on gère uniquement la largeur spécifiquement (axe horizontal).

Avec flex-basis, on donne une taille de base sur l'axe de direction du flexbox.

Pour indiquer la taille associée aux boîtes enfant, nous avons les possibilités suivantes :

Propriété Effet
aucune La boîte tentera de prendre toute la largeur nécessaire pour afficher son contenu, tant que l'espace est disponible. Sinon, s'ajuste à l'espace disponible.
width Indique une largeur fixe, peu importe l'espace disponible ou le contenu interne.
min-width Indique une largeur minimale fixe. La boîte s'agrandie selon les besoins de son contenu et l'espace disponible.
max-width Indique une largeur maximale fixe. La boîte ne prendra jamais plus large, mais pourra rapetisser selon son contenu.
flex-basis Indique une taille de base sur l'axe de direction (largeur ou hauteur selon l'axe). Si l'espace est insuffisant et qu'il est imposible de décaler les autres boîtes sur une nouvelle ligne, alors la boîte rétrécira. Si l'espace est suffisant, la boîte prendra la largeur donnée. Cette propriété prend tout son sens avec l'une ou les deux propriétés : (1) flex-grow qui indique un facteur d'agrandissement (2) flex-shrink qui indique un facteur de rétrécissement.

Des combinaisons possibles :

/*les trois valeurs suivantes, utilisées ensemble, 
donnent le même résultat que 
width: 20em **/

flex-basis: 20em;
flex-grow: 0;
flex-shrink: 0;

/*autre façon d'écrire cette combinaison :*/
flex: 0 0 20em;

/*les valeurs suivantes, utilisées ensemble, 
indiquent que la taille minimale ne peut être
plus basse que 20em, mais que la boîte peut 
s'agrandir s'il y a de la place*/

flex-basis: 20em;
flex-grow: 1;
flex-shrink: 0;

/*autre façon d'écrire cette combinaison :*/
flex: 1 0 20em;

/*les valeurs suivantes, utilisées ensemble, 
indiquent que la taille de base est 20em, mais :
1- s'il y a de la place, la boîte peut s'agrandir par un facteur de 2 
(le facteur de séparation de l'espace disponible attribuée à chaque boîte)
2- s'il manque de place, la boîte rétrécie d'abord à sa taille de base, puis s'il manque toujours de place, 
les autres boîtes sont renvoyées à la ligne suivante. Si cela n'est pas possible, la boîte rétrécie à une taille plus petite que sa base.*/

flex-basis: 20em;
flex-grow: 2;
flex-shrink: 1;

/*autre façon d'écrire cette combinaison :*/
flex: 2 1 20em;

Pour indiquer la hauteur dans un flexbox horizontal, on peut utiliser height, min-height, max-height. Cela leur impose une limite d'une façon ou d'une autre. Si on ne donne aucune valeur en hauteur, alors :

  • la hauteur de la boîte s'ajuste aux besoins du contenu et s'ajuste lorsque la boîte se redimensionne
  • toutes les boîtes prendront automatiquement la même hauteur que la boîte la plus haute, s'il y a plus d'une boîte par ligne
  • lorsque les boîtes sont affichées en une colonne, chaque boîte prend la hauteur nécessaire pour afficher son contenu

Donc, compte-tenu de ce comportement, on peut définir un min-height, à l'aide d'une unité relative, puis laisser la hauteur s'ajuster au contenu.

Exemple

En reprenant l'exemple plus haut, soit nos deux classes de boîtes :

.div-flex-item-small {
    background-color: lightgray;
    margin: 0.8rem;
    min-height: 12em;

    flex-basis: 10em;
    flex-grow: 2; /*peut s'agrandir 2 fois plus rapidement que l'autre classe*/
}

.div-flex-item-large {

    background-color: lightgray;
    margin: 0.8rem;
    min-height: 12em;

    flex-basis: 20em;
    flex-grow: 1;
    flex-shrink:0;  
}
Flexbox

Media query et flexbox

Évidemment, on peut utiliser les media query avec les flexbox pour couvrir le comportement que ces derniers doivent prendre pour différentes tailles d'écrans.

CSS

.div-flex-contenant {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

@media screen and (min-width:600px) {
    .div-flex-contenant{
        flex-direction: row;
    }
}

Flexbox

HTML

<div class="div-flex-contenant">
    <div><a href="#">Accueil</a> </div>
    <div><a href="#">Produits</a></div>
    <div><a href="#">Nous contacter</a></div>
    <div><a href="#">À propos</a></div>
</div>

CSS

.div-flex-contenant{
    margin: 0; 
    background: deepskyblue;

    display: flex;
    flex-flow: column wrap;   
}

.div-flex-contenant a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: white;
    text-align: center; 
    border-top: 0.1rem solid rgba(255,255,255,0.3); 
    border-bottom: 0.1rem solid rgba(0,0,0,0.1); 
}

@media screen and (min-width: 600px) {
  .div-flex-contenant {
    justify-content: space-around;
    flex-flow: row wrap;
    padding: 0;
  }
}

@media screen and (min-width: 900px) {
  .div-flex-contenant {
     justify-content: flex-end;
  }
}

Flexbox

Pour en connaître d'avantage sur les flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

Poster résumé

Poster