Flexbox Complete Cheatsheet

1. Conteneur Flex (Parent)

.conteneur {
    /* Activation Flexbox */
    display: flex;          /* conteneur block */
    display: inline-flex;   /* conteneur inline */

    /* Direction (axe principal) */
    flex-direction: row;            /* → défaut */
    flex-direction: row-reverse;    /* ← */
    flex-direction: column;         /* ↓ */
    flex-direction: column-reverse; /* ↑ */

    /* Retour à la ligne */
    flex-wrap: nowrap;       /* défaut */
    flex-wrap: wrap;         /* retour à la ligne */
    flex-wrap: wrap-reverse; /* retour inverse */

    /* Raccourci direction + wrap */
    flex-flow: row nowrap;   /* défaut */

    /* Alignement principal */
    justify-content: flex-start;    /* début */
    justify-content: flex-end;      /* fin */
    justify-content: center;        /* centre */
    justify-content: space-between; /* espace entre */
    justify-content: space-around;  /* espace autour */
    justify-content: space-evenly;  /* espace égal */

    /* Alignement secondaire */
    align-items: stretch;     /* étirement */
    align-items: flex-start; /* début */
    align-items: flex-end;   /* fin */
    align-items: center;     /* centre */
    align-items: baseline;   /* ligne de base */

    /* Alignement lignes multiples */
    align-content: flex-start;    /* début */
    align-content: flex-end;      /* fin */
    align-content: center;        /* centre */
    align-content: space-between; /* espace entre */
    align-content: space-around;  /* espace autour */
    align-content: stretch;       /* étirement */

    /* Espacement */
    gap: 10px;              /* uniforme */
    gap: 10px 20px;        /* rangées colonnes */
    row-gap: 10px;         /* rangées */
    column-gap: 20px;      /* colonnes */
}

2. Éléments Flex (Enfants)

.element {
    /* Ordre d'affichage */
    order: 0;              /* défaut */
    order: 1;              /* après */
    order: -1;             /* avant */

    /* Croissance */
    flex-grow: 0;          /* ne grandit pas */
    flex-grow: 1;          /* grandit */
    flex-grow: 2;          /* grandit 2x plus */

    /* Rétrécissement */
    flex-shrink: 1;        /* peut rétrécir */
    flex-shrink: 0;        /* ne rétrécit pas */
    flex-shrink: 2;        /* rétrécit 2x plus */

    /* Taille de base */
    flex-basis: auto;      /* taille auto */
    flex-basis: 100px;     /* taille fixe */
    flex-basis: 50%;       /* taille relative */

    /* Raccourci grow shrink basis */
    flex: 0 1 auto;        /* défaut */
    flex: 1;               /* 1 1 0% */
    flex: auto;            /* 1 1 auto */
    flex: none;            /* 0 0 auto */

    /* Alignement individuel */
    align-self: auto;      /* suit parent */
    align-self: flex-start;/* début */
    align-self: flex-end;  /* fin */
    align-self: center;    /* centre */
    align-self: stretch;   /* étirement */
    align-self: baseline;  /* ligne de base */
}

3. Motifs Courants

Centre Parfait

.centre-parfait {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Navigation Responsive

.navbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.nav-item {
    flex: 0 1 auto;
}

Grille Flexible

.grille {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 1 300px;
}

Layout avec Sidebar

.layout {
    display: flex;
}

.sidebar {
    flex: 0 0 200px;
}

.contenu {
    flex: 1;
}

4. Media Queries Courantes

/* Mobile First */
@media (min-width: 768px) {
    .conteneur {
        flex-direction: row;
    }
}

/* Desktop First */
@media (max-width: 767px) {
    .conteneur {
        flex-direction: column;
    }
}

5. Astuces et Pièges

Forcer le Rétrécissement

.element {
    min-width: 0;
    min-height: 0;
}

Centrage Vertical (hauteur inconnue)

.parent {
    display: flex;
    min-height: 100vh;
}

.enfant {
    margin: auto;
}

Colonnes de Hauteur Égale

.colonnes {
    display: flex;
    align-items: stretch; /* défaut */
}