Les flexbox

Le flexbox est une méthode qui consiste à créer une disposition à l'aide de boîtes flexibles.

On crée une boîte parent, dans laquelle on place des 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.

HTML

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

CSS

.div-flex-contenant{
    background-color: plum;
    display: flex;
}

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 ?

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.

Flex-wrap : retour à la ligne

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:

Position des enfants

• justify-content: alignement des enfants sur l'axe principal
• align-items : alignement des enfants sur l'axe perpendiculaire
• align-self : un enfant qui se positionne sur l'axe perpendiculaire

Exemple :

#flex_basic_three {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    background-color: rgb(199, 244, 199);
}

#flex_basic_three>* {
    padding: 1rem;
    border: 0.1rem solid;
}

#flex_basic_three h3 {
    align-self: start;
}

#flex_basic_three a {
    align-self: end;
}

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.

Exemple

.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;  /*Ne peut rapetisser plus petit que le flex-basis */
}

Poster résumé

Aide supplémentaire

Aide en français sur MDN : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout