UAA 6    CSS
☰

Flexbox

Flexbox (Flexible Box Layout) facilite la création de mises en page flexibles, centrées, alignées et adaptatives. Il excelle pour organiser des éléments dans une dimension (ligne ou colonne).

1. Activer Flexbox

On active Flexbox sur un conteneur :


.container {
    display: flex;
}

Les enfants deviennent alors des flex-items.

2. Les axes : concept fondamental

Par défaut :

3. flex-direction

Définit la direction de l’axe principal :


.container {
    flex-direction: row;        /* par défaut */
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
}

4. justify-content (axe principal)

Contrôle l’alignement des items sur l’axe principal :


.container {
    justify-content: flex-start;   /* par défaut */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
}

5. align-items (axe secondaire)

Contrôle l’alignement des items sur l’axe secondaire :


.container {
    align-items: stretch;      /* par défaut */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;
}

6. flex-wrap

Permet aux items de passer à la ligne :


.container {
    flex-wrap: nowrap;         /* par défaut */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

7. align-content (si plusieurs lignes)

Agit comme justify-content mais pour les lignes :


.container {
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch;    /* par défaut */
}

8. gap

Ajoute un espace entre les items :


.container {
    gap: 20px;
}

9. Propriétés appliquées aux items

9.1. order

Change l’ordre visuel des items :


.item {
    order: 2;
}

9.2. flex-grow

Définit la capacité d’un item à prendre l’espace disponible :


.item {
    flex-grow: 1;
}

9.3. flex-shrink

Définit la capacité d’un item à rétrécir :


.item {
    flex-shrink: 0;
}

9.4. flex-basis

Définit la taille de base de l’item :


.item {
    flex-basis: 200px;
}

9.5. flex (raccourci)


.item {
    flex: 1 0 150px;   /* grow | shrink | basis */
}

9.6. align-self

Permet à un item de s’aligner différemment des autres :


.item {
    align-self: center;
}

10. Exemple complet

CSS :


.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

HTML :




    
Bloc 1

    
Bloc 2

    
Bloc 3

11. Résumé rapide