L'Approche Flexbox : La Solution au Niveau du Composant

Bien que CSS Flexbox soit conçu pour la mise en page unidimensionnelle, il peut être utilisé pour créer des effets full-bleed, en particulier pour des éléments enfants au sein d'un composant.

Concept

Une technique consiste à inverser la logique de contrainte. Au lieu de contraindre le conteneur parent, on le laisse s'étendre sur toute la largeur. Ensuite, on applique une max-width à tous les enfants directs, sauf à ceux qui doivent être en full-bleed. Ces derniers sont autorisés à occuper 100% de la largeur du parent non contraint.

Implémentation

/* Le parent n'a pas de contrainte de largeur */
article {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    /* Contraindre tous les enfants par défaut */
article > *:not(.full-bleed) {
    max-width: 65ch;
    width: 100%;
    /* S'assurer qu'ils remplissent la largeur 
    jusqu'au max-width */
    }
    /* Permettre à l'élément full-bleed de s'étendre */
.full-bleed {
    width: 100%;
    max-width: 100%; /* Surcharge la contrainte par défaut */
    }

Analyse

Cette méthode est sémantiquement propre et évite les calculs complexes. Elle est excellente pour les situations où le contenu est généré par un CMS et où il faut appliquer sélectivement le style full-bleed à certains éléments comme les images ou les vidéos. Elle nécessite cependant une philosophie de stylage parent/enfant différente de l'approche Grid, car la logique de contrainte est déléguée aux enfants plutôt qu'au parent.